/* ===========================
   API DOCS PAGE
=========================== */

/* HERO */
.ad-hero { background: var(--navy); padding: clamp(64px, 10vw, 100px) 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ad-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.ad-hero-headline { color: var(--white); font-size: clamp(2rem, 4vw, 3.6rem); font-weight: 900; line-height: 1.05; margin-bottom: 16px; }
.ad-hero-headline .highlight { color: var(--orange); }
.ad-hero-sub { color: rgba(255,255,255,0.65); font-size: clamp(0.875rem, 1.1vw, 1rem); line-height: 1.75; margin-bottom: 24px; }
.ad-hero-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.ad-meta-pill { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); padding: 6px 14px; border-radius: 50px; font-size: 0.75rem; font-weight: 600; }
.ad-meta-pill i { font-size: 0.7rem; }
.ad-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ad-code-preview { background: #0d1117; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; overflow: hidden; }
.ad-code-header { background: rgba(255,255,255,0.05); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.08); }
.ad-code-dots { display: flex; gap: 6px; }
.ad-dot { width: 12px; height: 12px; border-radius: 50%; }
.ad-dot.red { background: #ff5f57; }
.ad-dot.yellow { background: #febc2e; }
.ad-dot.green { background: #28c840; }
.ad-code-lang { color: rgba(255,255,255,0.4); font-size: 0.72rem; font-family: monospace; }

/* ==============================
   DOCS LAYOUT — SIDEBAR + MAIN
   DESKTOP: sidebar always visible
   MOBILE: sidebar behind toggle
============================== */
.ad-docs-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 80vh;
    background: var(--white);
}

/* MOBILE TOGGLE — hidden on desktop, shown on mobile */
.ad-sidebar-toggle {
    display: none;
}

/* SIDEBAR — always visible on desktop */
.ad-sidebar {
    background: var(--grey-light);
    border-right: 1px solid var(--grey-mid);
    position: sticky;
    top: 72px;
    height: calc(100vh - 72px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
}

.ad-sidebar-inner {
    padding: 20px 16px;
}

.ad-sidebar-search { display: flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--grey-mid); border-radius: 8px; padding: 8px 12px; margin-bottom: 20px; }
.ad-sidebar-search i { color: var(--grey-text); font-size: 0.8rem; flex-shrink: 0; }
.ad-sidebar-search input { border: none; outline: none; font-family: var(--font); font-size: 0.8rem; color: var(--black); background: none; width: 100%; }
.ad-sidebar-search input::placeholder { color: #9ca3af; }
.ad-nav-group { margin-bottom: 20px; }
.ad-nav-label { display: block; font-size: 0.65rem; font-weight: 800; color: var(--grey-text); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; }
.ad-nav-link { display: block; font-size: 0.8rem; color: var(--grey-text); text-decoration: none; padding: 5px 8px; border-radius: 6px; transition: var(--transition); font-weight: 500; margin-bottom: 2px; }
.ad-nav-link:hover { color: var(--orange); background: rgba(247,147,26,0.06); }
.ad-nav-link.active { color: var(--orange); background: rgba(247,147,26,0.1); font-weight: 700; }
.ad-sidebar-status { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.15); border-radius: 8px; margin-top: 20px; font-size: 0.72rem; color: #059669; font-weight: 600; }
.ad-status-dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; flex-shrink: 0; animation: statusPulse 2s infinite; }
@keyframes statusPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); } 50% { box-shadow: 0 0 0 6px rgba(16,185,129,0); } }

/* MAIN CONTENT */
.ad-main { padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 64px); max-width: 860px; overflow-x: hidden; }
.ad-section { margin-bottom: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--grey-mid); }
.ad-section:last-child { border-bottom: none; }
.ad-section-title { font-size: clamp(1.2rem, 2vw, 1.8rem); color: var(--black); font-weight: 900; margin-bottom: 14px; }
.ad-section-intro { color: var(--grey-text); font-size: clamp(0.875rem, 1vw, 0.95rem); line-height: 1.8; margin-bottom: 24px; }
.ad-subsection-title { font-size: clamp(0.9rem, 1.2vw, 1.1rem); color: var(--black); font-weight: 700; margin: 24px 0 10px; }

/* INFO GRID */
.ad-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }
.ad-info-card { display: flex; align-items: flex-start; gap: 10px; background: var(--grey-light); border: 1px solid var(--grey-mid); border-radius: 10px; padding: 14px; }
.ad-info-icon { width: 32px; height: 32px; background: rgba(247,147,26,0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--orange); font-size: 0.85rem; flex-shrink: 0; }
.ad-info-card strong { display: block; font-size: 0.8rem; color: var(--black); margin-bottom: 3px; }
.ad-info-card p { font-size: 0.75rem; color: var(--grey-text); margin: 0; line-height: 1.5; }

/* CALLOUTS */
.ad-callout { display: flex; align-items: flex-start; gap: 12px; padding: clamp(12px, 2vw, 18px); border-radius: 10px; margin: 14px 0; }
.ad-callout i { font-size: 0.95rem; flex-shrink: 0; margin-top: 2px; }
.ad-callout strong { display: block; font-size: 0.85rem; margin-bottom: 3px; }
.ad-callout p { font-size: 0.8rem; line-height: 1.6; margin: 0; }
.ad-callout code { background: rgba(0,0,0,0.08); padding: 1px 5px; border-radius: 4px; font-size: 0.78rem; }
.ad-callout-info { background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.15); }
.ad-callout-info i, .ad-callout-info strong { color: #2563eb; }
.ad-callout-info p { color: var(--grey-text); }
.ad-callout-tip { background: rgba(247,147,26,0.06); border: 1px solid rgba(247,147,26,0.15); }
.ad-callout-tip i, .ad-callout-tip strong { color: var(--orange); }
.ad-callout-tip p { color: var(--grey-text); }
.ad-callout-warning { background: rgba(239,68,68,0.05); border: 1px solid rgba(239,68,68,0.15); }
.ad-callout-warning i, .ad-callout-warning strong { color: var(--red); }
.ad-callout-warning p { color: var(--grey-text); }
.ad-callout-success { background: rgba(16,185,129,0.06); border: 1px solid rgba(16,185,129,0.15); }
.ad-callout-success i, .ad-callout-success strong { color: #059669; }
.ad-callout-success p { color: var(--grey-text); }

/* STEPS */
.ad-steps { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.ad-step { display: flex; align-items: center; gap: 12px; background: var(--grey-light); border-radius: 10px; padding: 12px 16px; font-size: 0.85rem; color: var(--black); }
.ad-step-num { width: 26px; height: 26px; background: var(--orange); color: var(--white); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; flex-shrink: 0; }

/* CODE BLOCKS */
.ad-code-block { background: #0d1117; color: #e6edf3; font-family: 'Courier New', monospace; font-size: clamp(0.68rem, 0.85vw, 0.8rem); line-height: 1.7; padding: clamp(14px, 2vw, 22px); border-radius: 0 0 10px 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0; white-space: pre; display: block; }
.ad-code-block-wrap { background: #0d1117; border-radius: 10px; margin: 14px 0; overflow: hidden; }
.ad-code-block-wrap .ad-code-block { border-radius: 10px; }
.ad-inline-code { background: rgba(247,147,26,0.1); color: var(--orange); padding: 2px 6px; border-radius: 5px; font-family: 'Courier New', monospace; font-size: 0.82em; word-break: break-word; }
.ad-link { color: var(--orange); text-decoration: none; font-weight: 600; }
.ad-link:hover { text-decoration: underline; }

/* TOKEN COLOURS */
.token-comment { color: #8b949e; }
.token-command { color: #79c0ff; }
.token-string { color: #a5d6ff; }
.token-key { color: #7ee787; }
.token-number { color: #ff7b72; }
.token-keyword { color: #ff7b72; }

/* CODE TABS */
.ad-code-tabs { background: #0d1117; border-radius: 10px; overflow: hidden; margin: 14px 0; }
.ad-tab-buttons { display: flex; gap: 0; background: rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.08); padding: 0 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ad-tab-btn { background: none; border: none; color: rgba(255,255,255,0.4); font-family: var(--font); font-size: 0.75rem; font-weight: 600; padding: 10px 14px; cursor: pointer; transition: var(--transition); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; flex-shrink: 0; }
.ad-tab-btn:hover { color: rgba(255,255,255,0.7); }
.ad-tab-btn.active { color: var(--orange); border-bottom-color: var(--orange); }
.ad-tab-content { display: none; }
.ad-tab-content.active { display: block; }
.ad-code-block-dark { background: #0d1117; border-radius: 12px; overflow: hidden; margin: 14px 0; }
.ad-code-block-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.75rem; color: rgba(255,255,255,0.5); }
.ad-code-lang-badge { background: rgba(247,147,26,0.2); color: var(--orange); font-size: 0.65rem; font-weight: 700; padding: 2px 8px; border-radius: 50px; }
.ad-code-pre { color: #e6edf3; font-family: 'Courier New', monospace; font-size: clamp(0.65rem, 0.82vw, 0.78rem); line-height: 1.75; padding: clamp(14px, 2vw, 24px); margin: 0; overflow-x: auto; white-space: pre; display: block; -webkit-overflow-scrolling: touch; }

/* ENDPOINTS */
.ad-endpoint { border: 1px solid var(--grey-mid); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 14px; transition: var(--transition); }
.ad-endpoint:hover { border-color: rgba(247,147,26,0.25); }
.ad-endpoint-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--grey-light); flex-wrap: wrap; }
.ad-endpoint-body { padding: clamp(14px, 2vw, 22px); border-top: 1px solid var(--grey-mid); }
.ad-endpoint-body p { color: var(--grey-text); font-size: clamp(0.8rem, 0.9vw, 0.875rem); line-height: 1.7; margin-bottom: 14px; }
.ad-endpoint-body h4 { font-size: 0.78rem; font-weight: 700; color: var(--grey-text); text-transform: uppercase; letter-spacing: 0.5px; margin: 18px 0 8px; }
.ad-method { font-size: 0.7rem; font-weight: 800; padding: 3px 9px; border-radius: 6px; flex-shrink: 0; }
.ad-method.get { background: rgba(16,185,129,0.1); color: #059669; }
.ad-method.post { background: rgba(59,130,246,0.1); color: #2563eb; }
.ad-method.delete { background: rgba(239,68,68,0.1); color: #dc2626; }
.ad-endpoint-path { font-family: 'Courier New', monospace; font-size: clamp(0.78rem, 0.9vw, 0.875rem); color: var(--black); font-weight: 600; word-break: break-all; }
.ad-endpoint-desc { font-size: 0.75rem; color: var(--grey-text); margin-left: auto; white-space: nowrap; }

/* PARAMS */
.ad-params { display: flex; flex-direction: column; gap: 7px; margin: 10px 0; }
.ad-param { display: grid; grid-template-columns: 180px 90px 1fr; gap: 10px; align-items: start; background: var(--grey-light); border-radius: 8px; padding: 8px 12px; font-size: 0.8rem; }
.ad-param code { font-family: 'Courier New', monospace; color: var(--navy); font-weight: 600; word-break: break-word; }
.ad-param-type { font-size: 0.68rem; font-weight: 700; padding: 2px 7px; border-radius: 50px; background: rgba(107,114,128,0.1); color: var(--grey-text); text-align: center; white-space: nowrap; }
.ad-param-type.ad-required { background: rgba(247,147,26,0.1); color: var(--orange); }
.ad-param-desc { color: var(--grey-text); line-height: 1.5; font-size: 0.78rem; }

/* TABLE */
.ad-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; border: 1px solid var(--grey-mid); margin: 14px 0; }
.ad-table { width: 100%; border-collapse: collapse; font-size: clamp(0.75rem, 0.85vw, 0.82rem); min-width: 560px; }
.ad-table th { background: var(--navy); color: rgba(255,255,255,0.75); padding: 10px 14px; text-align: left; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.ad-table td { padding: 10px 14px; border-bottom: 1px solid var(--grey-mid); color: var(--grey-text); }
.ad-table tr:last-child td { border-bottom: none; }
.ad-table tr:hover td { background: rgba(247,147,26,0.02); }
.ad-status-200 { color: #059669; font-weight: 700; }
.ad-status-400 { color: #d97706; font-weight: 700; }
.ad-status-500 { color: #dc2626; font-weight: 700; }

/* CHANGELOG */
.ad-changelog-entry { background: var(--grey-light); border: 1px solid var(--grey-mid); border-radius: 12px; padding: clamp(16px, 2.5vw, 28px); }
.ad-changelog-version { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.ad-version-badge { background: var(--navy); color: var(--white); font-size: 0.75rem; font-weight: 800; padding: 3px 10px; border-radius: 6px; }
.ad-changelog-date { color: var(--grey-text); font-size: 0.75rem; }
.ad-version-stable { background: rgba(16,185,129,0.1); color: #059669; font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 50px; }
.ad-changelog-items { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.ad-changelog-items li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; color: var(--grey-text); }
.ad-changelog-items li::before { content: "→"; color: var(--orange); flex-shrink: 0; }

/* ===========================
   RESPONSIVE
=========================== */

/* TABLET — 1024px: Narrow sidebar */
@media (max-width: 1024px) {
    .ad-docs-layout { grid-template-columns: 220px 1fr; }
    .ad-info-grid { grid-template-columns: 1fr; }
    .ad-param { grid-template-columns: 150px 80px 1fr; }
}

/* MOBILE — 900px: Collapse sidebar behind toggle */
@media (max-width: 900px) {
    .ad-hero-inner { grid-template-columns: 1fr; gap: 32px; }
    .ad-docs-layout { grid-template-columns: 1fr; }
    .ad-sidebar-toggle {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 20px;
        background: var(--grey-light);
        border: none;
        border-bottom: 1px solid var(--grey-mid);
        font-family: var(--font);
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--black);
        cursor: pointer;
    }
    .ad-sidebar-toggle i.fa-chevron-down { color: var(--orange); transition: transform 0.3s ease; }
    .ad-sidebar-toggle.open i.fa-chevron-down { transform: rotate(180deg); }
    .ad-sidebar {
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--grey-mid);
        overflow: visible;
    }
    .ad-sidebar-inner { display: none; }
    .ad-sidebar-inner.open { display: block; }
    .ad-main { padding: 24px 20px; max-width: 100%; }
    .ad-param { grid-template-columns: 130px 80px 1fr; }
}

/* MOBILE — 768px */
@media (max-width: 768px) {
    .ad-hero { padding: 48px 0 32px; }
    .ad-hero-headline { font-size: 1.9rem; }
    .ad-hero-actions { flex-direction: column; align-items: stretch; }
    .ad-hero-actions .btn-orange,
    .ad-hero-actions .btn-outline { width: 100%; text-align: center; justify-content: center; display: flex; }
    .ad-hero-meta { gap: 6px; }
    .ad-meta-pill { font-size: 0.7rem; padding: 5px 10px; }
    .ad-endpoint-desc { display: none; }
    .ad-info-grid { grid-template-columns: 1fr; }
    .ad-param { grid-template-columns: 1fr; gap: 4px; }
    .ad-param code { font-size: 0.85rem; font-weight: 700; color: var(--navy); }
    .ad-param-type { display: inline-flex; width: fit-content; }
}

/* MOBILE SMALL — 540px */
@media (max-width: 540px) {
    .ad-hero-headline { font-size: 1.6rem; }
    .ad-main { padding: 16px; }
    .ad-section-title { font-size: 1.2rem; }
    .ad-subsection-title { font-size: 0.95rem; }
    .ad-code-block { font-size: 0.65rem; padding: 12px; }
    .ad-step { flex-wrap: wrap; }
    .ad-callout { flex-direction: column; gap: 8px; }
    .ad-tab-btn { font-size: 0.7rem; padding: 8px 10px; }
    .ad-endpoint-path { font-size: 0.72rem; }
    .ad-method { font-size: 0.65rem; }
}