/**
 * API Docs Page Styles
 * RapiDoc with Material Design 3 theme
 */

.api-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  padding: 16px 24px;
  background: var(--md-sys-color-surface-1);
  border-radius: 16px;
  box-shadow: var(--md-sys-elevation-1);
}

.api-header .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--md-sys-color-primary);
  text-decoration: none;
  font-size: 14px;
  transition: opacity 0.2s;
}

.api-header .back-link:hover {
  opacity: 0.8;
}

.api-header .page-title {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--md-sys-color-primary);
  margin: 0;
}

rapi-doc {
  width: 100%;
  height: calc(100vh - 200px);
  border-radius: 16px;
  overflow: hidden;
  display: block;
}

rapi-doc::part(section-navbar) {
  background: var(--md-sys-color-surface-1);
}

rapi-doc::part(section-main-content) {
  background: var(--md-sys-color-surface-1);
}

rapi-doc::part(btn) {
  border-radius: 20px;
}

rapi-doc::part(btn-outline) {
  border-color: var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface) !important;
  border-radius: 20px;
}

rapi-doc::part(btn-fill) {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary) !important;
  border-radius: 20px;
}

rapi-doc::part(btn-try) {
  color: var(--md-sys-color-on-primary) !important;
}

rapi-doc::part(textbox) {
  border-radius: 8px;
  border-color: var(--md-sys-color-outline);
}

rapi-doc::part(anchor) {
  color: var(--md-sys-color-primary);
}