@import url('../../shared/css/styles.css');

/* Expandable section */
.expandable-section { margin: var(--spacing-md) 0; }
.expandable-header {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 12px 16px; background: var(--color-bg-secondary); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); cursor: pointer; font-size: var(--font-sm); font-weight: 500;
  color: var(--color-text); transition: background-color var(--transition-normal) ease; user-select: none;
}
.expandable-header:hover { background: var(--color-btn-hover); }
.expandable-header .expandable-icon {
  font-weight: bold; font-size: var(--font-xl); line-height: 1;
  transition: transform var(--transition-theme) ease;
}
.expandable-section[aria-expanded="true"] .expandable-header .expandable-icon { transform: rotate(45deg); }
.expandable-content {
  padding: var(--spacing-md); background: var(--color-bg-secondary);
  border: 1px solid var(--color-border); border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: opacity var(--transition-theme) ease, max-height var(--transition-theme) ease,
    padding var(--transition-theme) ease, margin-top var(--transition-theme) ease;
  opacity: 1; max-height: none; overflow: visible;
}
.expandable-content.hidden {
  opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0;
  margin-top: 0; overflow: hidden;
}