/* ============================================================
   css/components/accordion.css
   Zolto v8.1.0 — Accordion & Tab Group Components
   ============================================================
   Purpose:
   - .zolto-accordion  — collapsible accordion container
   - .zolto-tabs       — tabbed panel group
   - Keyboard-navigable, ARIA-compliant interactive patterns
   - Smooth open/close transitions
   - All values via CSS custom properties from variables.css
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. Accordion Container
   ───────────────────────────────────────────────────────────── */

.zolto-accordion {
  border:        1px solid var(--accordion-border);
  border-radius: var(--accordion-radius);
  overflow:      hidden;
  margin-bottom: var(--prose-block-gap);
  background:    var(--bg-surface);
}

/* Flush variant — no outer border, items separated only by inner borders */
.zolto-accordion.zolto-accordion-flush {
  border:        none;
  border-radius: 0;
  background:    transparent;
}

/* Separated variant — each item is its own card */
.zolto-accordion.zolto-accordion-separated {
  border:     none;
  background: transparent;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-2);
  overflow:   visible;
}

.zolto-accordion.zolto-accordion-separated .zolto-accordion-item {
  border:        1px solid var(--accordion-border);
  border-radius: var(--accordion-radius);
  overflow:      hidden;
}


/* ─────────────────────────────────────────────────────────────
   2. Accordion Item
   ───────────────────────────────────────────────────────────── */

.zolto-accordion-item {
  border-bottom: 1px solid var(--accordion-border);
}

.zolto-accordion-item:last-child {
  border-bottom: none;
}

/* Flush accordion — no inner separators */
.zolto-accordion.zolto-accordion-flush .zolto-accordion-item {
  border-bottom: 1px solid var(--border-faint);
}

.zolto-accordion.zolto-accordion-flush .zolto-accordion-item:last-child {
  border-bottom: none;
}


/* ─────────────────────────────────────────────────────────────
   3. Accordion Header (summary / trigger)
   ───────────────────────────────────────────────────────────── */

.zolto-accordion-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  padding:         var(--space-3-5) var(--space-4);
  font-size:       var(--text-sm);
  font-weight:     var(--weight-medium);
  color:           var(--accordion-header-text);
  background:      var(--accordion-header-bg);
  cursor:          pointer;
  user-select:     none;
  list-style:      none;
  text-align:      left;
  gap:             var(--space-3);
  transition:      background var(--duration-fast) var(--ease-out),
                   color      var(--duration-fast) var(--ease-out);
}

/* Remove default details/summary arrow */
.zolto-accordion-header::-webkit-details-marker { display: none; }
.zolto-accordion-header::marker               { display: none; }

.zolto-accordion-header:hover {
  background: var(--accordion-header-hover-bg);
}

/* Open state header */
.zolto-accordion-item[open] > .zolto-accordion-header,
.zolto-accordion-item.open  > .zolto-accordion-header {
  background:    var(--accordion-header-hover-bg);
  border-bottom: 1px solid var(--accordion-border);
}

/* Header label text */
.zolto-accordion-label {
  flex:          1;
  line-height:   var(--leading-snug);
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* Optional leading icon slot */
.zolto-accordion-lead-icon {
  flex-shrink: 0;
  width:       18px;
  height:      18px;
  color:       var(--accordion-icon-color);
}

.zolto-accordion-lead-icon svg {
  width:  18px;
  height: 18px;
}

/* Chevron icon — rotates on open */
.zolto-accordion-chevron {
  flex-shrink:  0;
  width:        16px;
  height:       16px;
  color:        var(--accordion-icon-color);
  transition:   transform var(--duration-fast) var(--ease-out);
}

.zolto-accordion-chevron svg {
  width:  16px;
  height: 16px;
}

.zolto-accordion-item[open] > .zolto-accordion-header .zolto-accordion-chevron,
.zolto-accordion-item.open  > .zolto-accordion-header .zolto-accordion-chevron {
  transform: rotate(180deg);
}


/* ─────────────────────────────────────────────────────────────
   4. Accordion Body (panel content)
   ───────────────────────────────────────────────────────────── */

.zolto-accordion-body {
  padding:     var(--space-4);
  font-size:   var(--text-base);
  color:       var(--accordion-body-text);
  line-height: var(--leading-relaxed);
  background:  transparent;
}

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

/* Flush accordion body — aligned to text, no box */
.zolto-accordion.zolto-accordion-flush .zolto-accordion-body {
  padding-left:  var(--space-2);
  padding-right: var(--space-2);
}


/* ─────────────────────────────────────────────────────────────
   5. Accordion open/close animation
      Uses the CSS-only <details> expand trick where possible,
      enhanced by JS animation class toggling
   ───────────────────────────────────────────────────────────── */

/* JS-powered smooth animation (toggled by accordion.js) */
.zolto-accordion-body.zolto-accordion-collapsing {
  overflow:   hidden;
  height:     0;
  transition: height var(--duration-normal) var(--ease-out);
}

.zolto-accordion-body.zolto-accordion-expanding {
  overflow:   hidden;
  transition: height var(--duration-normal) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .zolto-accordion-body.zolto-accordion-collapsing,
  .zolto-accordion-body.zolto-accordion-expanding {
    transition: none;
  }
}


/* ─────────────────────────────────────────────────────────────
   6. Tab Group Shell
   ───────────────────────────────────────────────────────────── */

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

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


/* ─────────────────────────────────────────────────────────────
   7. 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;
}

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

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


/* ─────────────────────────────────────────────────────────────
   8. 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-bottom: 2px solid transparent;
  white-space:   nowrap;
  cursor:        pointer;
  user-select:   none;
  flex-shrink:   0;
  line-height:   var(--leading-none);
  margin-bottom: -1px; /* Overlap border-bottom of header */
  transition:    color        var(--duration-fast) var(--ease-out),
                 border-color var(--duration-fast) var(--ease-out),
                 background   var(--duration-fast) var(--ease-out);
}

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

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

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

/* Tab button icon */
.zolto-tab-btn-icon {
  width:       14px;
  height:      14px;
  flex-shrink: 0;
}

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

/* Tab button badge (notification count) */
.zolto-tab-badge {
  background:    var(--accent-primary-subtle);
  color:         var(--accent-primary);
  border-radius: var(--radius-full);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-semibold);
  padding:       0.1em 0.45em;
  line-height:   1.4;
  font-variant-numeric: tabular-nums;
}

/* Pill variant button */
.zolto-tabs.zolto-tabs-pill .zolto-tab-btn {
  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.zolto-tab-active {
  background: var(--bg-surface-2);
  color:      var(--tabs-tab-active-text);
}


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

.zolto-tabs-body {
  position: relative;
}

.zolto-tab-panel {
  padding:     var(--tabs-panel-padding);
  font-size:   var(--text-base);
  line-height: var(--leading-relaxed);
  animation:   zolto-tab-fadein var(--duration-fast) var(--ease-out) forwards;
}

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

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

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

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

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


/* ─────────────────────────────────────────────────────────────
   10. Responsive
   ───────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .zolto-accordion-header {
    padding: var(--space-3) var(--space-3);
  }

  .zolto-accordion-body {
    padding: var(--space-3);
  }

  .zolto-tab-btn {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }

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