/* ============================================================
   css/components/tabs.css
   Zolto v8.1.0 — Tab Group Component (canonical styles)
   ============================================================
   Purpose:
   - Full tab system: underline, pill, boxed, vertical variants
   - Keyboard navigation visual states
   - Tab badge, icon, close button
   - Overrides base tab rules from accordion.css
   - All values via CSS custom properties from variables.css
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. Tab Group Shell
   ───────────────────────────────────────────────────────────── */

.zolto-tabs {
  display:       flex;
  flex-direction: column;
  border:        1px solid var(--tabs-border);
  border-radius: var(--radius-md);
  overflow:      hidden;
  margin-bottom: var(--prose-block-gap);
  background:    var(--bg-surface);
}

/* Borderless / plain variant */
.zolto-tabs.zolto-tabs-plain {
  border:     none;
  background: transparent;
  border-radius: 0;
}

/* Vertical layout — tabs on the left */
.zolto-tabs.zolto-tabs-vertical {
  flex-direction: row;
}


/* ─────────────────────────────────────────────────────────────
   2. Tab Header (tab list)
   ───────────────────────────────────────────────────────────── */

.zolto-tabs-header {
  display:       flex;
  align-items:   flex-end;
  border-bottom: 1px solid var(--tabs-border);
  background:    var(--bg-panel);
  overflow-x:    auto;
  overflow-y:    hidden;
  scrollbar-width: none;
  flex-shrink:   0;
  position:      relative;
}

.zolto-tabs-header::-webkit-scrollbar {
  display: none;
}

/* Pill variant header */
.zolto-tabs.zolto-tabs-pill .zolto-tabs-header {
  background:    var(--bg-surface);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding:       var(--space-2);
  gap:           var(--space-1);
  align-items:   center;
}

/* Boxed variant header */
.zolto-tabs.zolto-tabs-boxed .zolto-tabs-header {
  background:    var(--bg-app);
  padding:       var(--space-2) var(--space-2) 0;
  gap:           var(--space-1);
  align-items:   flex-end;
}

/* Vertical header — left column */
.zolto-tabs.zolto-tabs-vertical .zolto-tabs-header {
  flex-direction: column;
  align-items:    stretch;
  border-bottom:  none;
  border-right:   1px solid var(--tabs-border);
  overflow-x:     hidden;
  overflow-y:     auto;
  width:          var(--tabs-vertical-width, 180px);
  flex-shrink:    0;
}


/* ─────────────────────────────────────────────────────────────
   3. Tab Button
   ───────────────────────────────────────────────────────────── */

.zolto-tab-btn {
  display:        flex;
  align-items:    center;
  gap:            var(--space-1-5);
  padding:        var(--space-2-5) var(--space-4);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-medium);
  color:          var(--tabs-tab-text);
  background:     transparent;
  border:         none;
  border-bottom:  2px solid transparent;
  white-space:    nowrap;
  cursor:         pointer;
  user-select:    none;
  flex-shrink:    0;
  line-height:    var(--leading-none);
  margin-bottom:  -1px;
  position:       relative;
  transition:     color        var(--duration-fast) var(--ease-out),
                  border-color var(--duration-fast) var(--ease-out),
                  background   var(--duration-fast) var(--ease-out);
  outline:        none;
}

.zolto-tab-btn:hover {
  color:      var(--tabs-tab-active-text);
  background: var(--tabs-tab-hover-bg);
}

/* Underline active state (default) */
.zolto-tab-btn[aria-selected="true"],
.zolto-tab-btn.zolto-tab-active {
  color:        var(--tabs-tab-active-text);
  border-color: var(--tabs-tab-active-border);
}

/* Keyboard focus ring on tab button */
.zolto-tab-btn:focus-visible {
  outline:        2px solid var(--accent-primary);
  outline-offset: -2px;
  border-radius:  var(--radius-sm) var(--radius-sm) 0 0;
}

.zolto-tab-btn:disabled {
  opacity:        0.38;
  cursor:         not-allowed;
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────
   4. Pill Variant Buttons
   ───────────────────────────────────────────────────────────── */

.zolto-tabs.zolto-tabs-pill .zolto-tab-btn {
  border:        none;
  border-bottom: none;
  border-radius: var(--radius-sm);
  margin-bottom: 0;
  padding:       var(--space-1-5) var(--space-3);
}

.zolto-tabs.zolto-tabs-pill .zolto-tab-btn[aria-selected="true"],
.zolto-tabs.zolto-tabs-pill .zolto-tab-btn.zolto-tab-active {
  background: var(--bg-surface-2);
  color:      var(--tabs-tab-active-text);
  box-shadow: var(--shadow-xs);
}

.zolto-tabs.zolto-tabs-pill .zolto-tab-btn:focus-visible {
  border-radius: var(--radius-sm);
}


/* ─────────────────────────────────────────────────────────────
   5. Boxed Variant Buttons
   ───────────────────────────────────────────────────────────── */

.zolto-tabs.zolto-tabs-boxed .zolto-tab-btn {
  border:        1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: 0;
  background:    transparent;
}

.zolto-tabs.zolto-tabs-boxed .zolto-tab-btn:hover {
  background:   var(--bg-surface);
  border-color: var(--border-subtle);
}

.zolto-tabs.zolto-tabs-boxed .zolto-tab-btn[aria-selected="true"],
.zolto-tabs.zolto-tabs-boxed .zolto-tab-btn.zolto-tab-active {
  background:   var(--bg-surface);
  border-color: var(--tabs-border);
  color:        var(--tabs-tab-active-text);
  /* Cover bottom border of header */
  box-shadow: 0 1px 0 var(--bg-surface);
}


/* ─────────────────────────────────────────────────────────────
   6. Vertical Variant Buttons
   ───────────────────────────────────────────────────────────── */

.zolto-tabs.zolto-tabs-vertical .zolto-tab-btn {
  border-bottom:  none;
  border-right:   2px solid transparent;
  border-radius:  0;
  margin-bottom:  0;
  margin-right:   -1px;
  padding:        var(--space-2-5) var(--space-4);
  width:          100%;
  text-align:     left;
  justify-content: flex-start;
}

.zolto-tabs.zolto-tabs-vertical .zolto-tab-btn[aria-selected="true"],
.zolto-tabs.zolto-tabs-vertical .zolto-tab-btn.zolto-tab-active {
  border-right-color: var(--tabs-tab-active-border);
  background:         var(--tabs-tab-hover-bg);
}


/* ─────────────────────────────────────────────────────────────
   7. Tab Button Inner Elements
   ───────────────────────────────────────────────────────────── */

/* Icon */
.zolto-tab-icon {
  width:       15px;
  height:      15px;
  flex-shrink: 0;
  opacity:     0.7;
}

.zolto-tab-icon svg {
  width:  15px;
  height: 15px;
}

.zolto-tab-btn[aria-selected="true"] .zolto-tab-icon,
.zolto-tab-btn.zolto-tab-active .zolto-tab-icon {
  opacity: 1;
}

/* Label text */
.zolto-tab-label {
  flex:          1;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* Badge — notification count */
.zolto-tab-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       18px;
  height:          18px;
  padding:         0 var(--space-1);
  border-radius:   var(--radius-full);
  font-size:       var(--text-xs);
  font-weight:     var(--weight-semibold);
  line-height:     1;
  flex-shrink:     0;
  background:      var(--bg-surface-2);
  color:           var(--text-mute);
  font-variant-numeric: tabular-nums;
  transition:      background var(--duration-fast) var(--ease-out),
                   color      var(--duration-fast) var(--ease-out);
}

.zolto-tab-btn[aria-selected="true"] .zolto-tab-badge,
.zolto-tab-btn.zolto-tab-active .zolto-tab-badge {
  background: var(--accent-primary-subtle);
  color:      var(--accent-primary);
}

/* Dot indicator (unread/new) */
.zolto-tab-dot {
  width:         6px;
  height:        6px;
  border-radius: var(--radius-full);
  background:    var(--accent-primary);
  flex-shrink:   0;
}

/* Close button on closeable tabs */
.zolto-tab-close {
  width:           18px;
  height:          18px;
  border-radius:   var(--radius-sm);
  color:           var(--text-faint);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  opacity:         0;
  font-size:       0.9em;
  transition:      background var(--duration-fast) var(--ease-out),
                   color      var(--duration-fast) var(--ease-out),
                   opacity    var(--duration-fast) var(--ease-out);
}

.zolto-tab-close svg {
  width:  10px;
  height: 10px;
}

.zolto-tab-btn:hover .zolto-tab-close {
  opacity: 1;
}

.zolto-tab-close:hover {
  background: var(--bg-surface-3);
  color:      var(--text-main);
}


/* ─────────────────────────────────────────────────────────────
   8. Tab Add Button (new tab)
   ───────────────────────────────────────────────────────────── */

.zolto-tab-add-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  margin:          auto var(--space-1);
  border-radius:   var(--radius-sm);
  color:           var(--text-faint);
  transition:      background var(--duration-fast) var(--ease-out),
                   color      var(--duration-fast) var(--ease-out);
  flex-shrink:     0;
}

.zolto-tab-add-btn:hover {
  background: var(--bg-surface-2);
  color:      var(--text-main);
}

.zolto-tab-add-btn svg {
  width:  14px;
  height: 14px;
}


/* ─────────────────────────────────────────────────────────────
   9. Tab Panels Body
   ───────────────────────────────────────────────────────────── */

.zolto-tabs-body {
  flex:     1;
  overflow: hidden;
  position: relative;
}

.zolto-tabs.zolto-tabs-vertical .zolto-tabs-body {
  border-left: none;
}

.zolto-tab-panel {
  padding:   var(--tabs-panel-padding);
  font-size: var(--text-base);
  animation: zolto-tab-enter var(--duration-fast) var(--ease-out) both;
}

@keyframes zolto-tab-enter {
  from {
    opacity:   0;
    transform: translateY(3px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

.zolto-tab-panel > *:first-child { margin-top: 0;    }
.zolto-tab-panel > *:last-child  { margin-bottom: 0; }

/* Hidden panel */
.zolto-tab-hidden,
.zolto-tab-panel[hidden] {
  display: none;
}

/* Plain variant — no padding */
.zolto-tabs.zolto-tabs-plain .zolto-tab-panel,
.zolto-tabs.zolto-tabs-plain .zolto-tabs-body {
  padding: 0;
}

/* Vertical variant body layout */
.zolto-tabs.zolto-tabs-vertical .zolto-tab-panel {
  height:   100%;
  overflow-y: auto;
}

/* Panel slide animation for horizontal tabs */
.zolto-tabs-body.zolto-tabs-sliding .zolto-tab-panel {
  position:  absolute;
  inset:     0;
  animation: zolto-tab-slide var(--duration-normal) var(--ease-out) both;
}

@keyframes zolto-tab-slide {
  from {
    opacity:   0;
    transform: translateX(12px);
  }
  to {
    opacity:   1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zolto-tab-panel,
  .zolto-tabs-body.zolto-tabs-sliding .zolto-tab-panel {
    animation: none;
  }
}


/* ─────────────────────────────────────────────────────────────
   10. Code Tabs (language switcher pattern)
   ───────────────────────────────────────────────────────────── */

.zolto-code-tabs {
  border:        1px solid var(--code-block-border);
  border-radius: var(--code-block-radius);
  overflow:      hidden;
  margin-bottom: var(--prose-block-gap);
}

.zolto-code-tabs .zolto-tabs-header {
  background:    var(--code-block-header-bg);
  border-bottom: 1px solid var(--code-block-border);
  padding:       0 var(--space-2);
}

.zolto-code-tabs .zolto-tab-btn {
  font-family:   var(--font-mono);
  font-size:     var(--text-xs);
  color:         var(--code-block-lang-text);
  padding:       var(--space-2) var(--space-3);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border-bottom-width: 2px;
}

.zolto-code-tabs .zolto-tab-btn[aria-selected="true"],
.zolto-code-tabs .zolto-tab-btn.zolto-tab-active {
  color:        var(--text-main);
  border-color: var(--accent-primary);
}

.zolto-code-tabs .zolto-tab-panel {
  padding: 0;
  background: var(--code-block-bg);
}

.zolto-code-tabs .zolto-tab-panel .zolto-pre {
  margin: 0;
  border: none;
  border-radius: 0;
}


/* ─────────────────────────────────────────────────────────────
   11. Overflow — More tabs button
   ───────────────────────────────────────────────────────────── */

.zolto-tabs-overflow-btn {
  display:         flex;
  align-items:     center;
  gap:             var(--space-1);
  padding:         var(--space-2) var(--space-3);
  font-size:       var(--text-sm);
  font-weight:     var(--weight-medium);
  color:           var(--text-mute);
  flex-shrink:     0;
  margin-bottom:  -1px;
  border-bottom:   2px solid transparent;
  transition:      color      var(--duration-fast) var(--ease-out),
                   background var(--duration-fast) var(--ease-out);
}

.zolto-tabs-overflow-btn:hover {
  background: var(--tabs-tab-hover-bg);
  color:      var(--text-main);
}

.zolto-tabs-overflow-btn svg {
  width:  14px;
  height: 14px;
}

/* Overflow dropdown */
.zolto-tabs-overflow-menu {
  position:      absolute;
  top:           calc(100% + var(--space-1));
  right:         0;
  background:    var(--dropdown-bg);
  border:        1px solid var(--dropdown-border);
  border-radius: var(--dropdown-radius);
  box-shadow:    var(--dropdown-shadow);
  z-index:       var(--z-dropdown);
  min-width:     160px;
  padding:       var(--space-1);
}

.zolto-tabs-overflow-item {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  padding:       var(--space-1-5) var(--space-3);
  font-size:     var(--text-sm);
  color:         var(--dropdown-item-text);
  border-radius: var(--radius-sm);
  cursor:        pointer;
  transition:    background var(--duration-fast) var(--ease-out),
                 color      var(--duration-fast) var(--ease-out);
}

.zolto-tabs-overflow-item:hover,
.zolto-tabs-overflow-item.active {
  background: var(--dropdown-item-hover-bg);
  color:      var(--dropdown-item-hover-text);
}


/* ─────────────────────────────────────────────────────────────
   12. Responsive
   ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .zolto-tab-btn {
    padding:   var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }

  .zolto-tab-panel {
    padding: var(--space-3);
  }

  /* Vertical tabs stack on mobile */
  .zolto-tabs.zolto-tabs-vertical {
    flex-direction: column;
  }

  .zolto-tabs.zolto-tabs-vertical .zolto-tabs-header {
    flex-direction: row;
    border-right:   none;
    border-bottom:  1px solid var(--tabs-border);
    overflow-x:     auto;
    width:          100%;
  }

  .zolto-tabs.zolto-tabs-vertical .zolto-tab-btn {
    border-right:  none;
    border-bottom: 2px solid transparent;
    margin-right:  0;
    margin-bottom: -1px;
    width:         auto;
  }

  .zolto-tabs.zolto-tabs-vertical .zolto-tab-btn[aria-selected="true"],
  .zolto-tabs.zolto-tabs-vertical .zolto-tab-btn.zolto-tab-active {
    border-right-color: transparent;
    border-bottom-color: var(--tabs-tab-active-border);
  }
}