/* =============================================
   API DOCS — Stili condivisi (list + detail)
   ============================================= */

/* Layout */
.docs-wrapper { display: flex; }

.sidebar {
  width: 240px;
  min-width: 240px;
  background: #223855;
  color: #c8dce8;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 28px 0 40px;
}
.sidebar-logo { padding: 0 24px 24px; border-bottom: 1px solid #2e4d6a; margin-bottom: 16px; text-align: center; }
.sidebar-logo h1 { font-size: 27px; font-weight: 700; color: #fff; letter-spacing: .3px; margin: 0; }
.sidebar-logo span { font-size: 22px; color: #7a9ab8; }
.sidebar nav a { display: block; padding: 7px 24px; font-size: 13px; color: #a8c4d8; transition: color .15s, background .15s; }
.sidebar nav a:hover { color: #fff; background: rgba(255,255,255,.07); text-decoration: none; }
.sidebar nav a.active { color: #84f0b5; background: rgba(132,240,181,.1); font-weight: 600; }
.sidebar nav .nav-section { padding: 16px 24px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #4a6a88; }

.main { flex: 1; background: #eef1f7; }
.main-content { padding: 48px 56px 80px; }
.main-content section { margin-bottom: 56px; }
.main-content h2 { font-size: 22px; font-weight: 700; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid #e8eaf0; }
.main-content h3 { font-size: 15px; font-weight: 600; margin: 24px 0 10px; }

.page-header { margin-bottom: 40px; }
.page-header h1 { font-size: 30px; font-weight: 800; margin-bottom: 6px; }
.page-header .version { display: inline-block; background: var(--nav); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; margin-left: 10px; vertical-align: middle; }
.page-header > p { color: #666; font-size: 16px; margin-top: 10px; }

.method-badge { background: var(--nav-link); color: var(--nav); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 4px; min-width: 50px; text-align: center; }

/* Pulsanti */
.btn-primary {
  --bs-btn-bg: #223854;
  --bs-btn-border-color: #223854;
  --bs-btn-color: #c8dce8;
  --bs-btn-hover-bg: #223854;
  --bs-btn-hover-border-color: #223854;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #223854;
  --bs-btn-active-border-color: #223854;
  --bs-btn-active-color: #fff;
}
.btn-primary:hover { filter: brightness(1.3); }

/* Logo animato */
.api-logo { display: block; margin: 0 auto 12px; opacity: 0.6; }
.api-logo .node { animation: node-pulse 3s ease-in-out infinite; }
@keyframes node-pulse { 0%,100% { opacity:.4; } 50% { opacity:.9; } }

/* Mobile: off-canvas sidebar */
.sidebar-toggle { display: none; }
.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1040; }
.sidebar-overlay.open { display: block; }

@media (max-width: 768px) {
  .docs-wrapper { display: block; }

  .sidebar {
    position: fixed;
    top: 0; left: -260px;
    width: 260px; min-width: 260px;
    height: 100vh; max-height: 100vh;
    z-index: 1050;
    transition: left .25s ease;
  }
  .sidebar.open { left: 0; }

  .sidebar-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #223855;
    color: #a8c4d8;
    border: none;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 100;
    letter-spacing: .3px;
  }
  .sidebar-toggle:hover { color: #fff; }

  .main-content { padding: 20px 16px 60px; }
  .page-header h1 { font-size: 22px; }
}