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

/* Page Background */
body {
  background: linear-gradient(135deg, var(--md-sys-color-surface) 0%, var(--md-sys-color-surface-1) 100%);
  margin: 0;
  padding: 20px;
  min-height: 100vh;
  box-sizing: border-box;
}

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

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

/* Override RapiDoc internal styles for MD3 consistency */
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);
}

/* Theme Toggle - Fixed position */
.theme-toggle {
  position: fixed;
  top: 36px;
  right: 36px;
  z-index: 1000;
  background: var(--md-sys-color-surface-1);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-sys-elevation-2);
  transition: var(--theme-transition), transform 0.2s;
}

.theme-toggle:hover {
  transform: scale(1.05);
  background: var(--md-sys-color-surface-2);
}

.theme-toggle:active {
  transform: scale(0.95);
}

.theme-toggle .material-icons {
  font-size: 22px;
}

.theme-toggle .icon-light { display: none; }
.theme-toggle .icon-dark { display: block; }

[data-theme="dark"] .theme-toggle .icon-light { display: block; }
[data-theme="dark"] .theme-toggle .icon-dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-light { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-dark { display: none; }
}