/* api-styles.css - API 文檔頁面專屬樣式 */


/* ========== API 頁面佈局 ========== */

.api-main {
    padding-top: 2rem;
    padding-bottom: 5rem;
}


/* 兩欄佈局容器 */

.api-container {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
    /* 讓內容靠頂部對齊 */
}


/* 左側邊欄 - 導航 */

.api-sidebar {
    width: 280px;
    /* 稍微增加寬度 */
    flex-shrink: 0;
    position: sticky;
    top: 80px;
    padding: 1rem;
    /* 增加內邊距 */
    /* 添加邊框和背景，使其在背景圖上凸顯 */
    background-color: var(--color-bg-secondary);
    /* 使用次要背景色 (深色模式下是 #172A46) */
    border: 1px solid var(--color-border);
    border-radius: 8px;
    /* 圓角邊框 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    /* 輕微陰影，增加浮動感 */
}

.api-content {
    flex-grow: 1;
    min-width: 0;
    /* 移除這裡的邊界，讓裡面的 section 來定義邊界 */
}


/* API 內容單元 (每個 API 端點詳情) - 新增卡片樣式 */

.api-section {
    /* 替換之前的虛線分隔為帶背景的面板 */
    padding: 2.5rem;
    /* 增加內部填充空間 */
    margin-bottom: 2rem;
    /* 增加單元之間的間距 */
    border-radius: 8px;
    /* 統一圓角 */
    /* 賦予背景和邊框 */
    background-color: var(--color-bg-secondary);
    /* 使用次要背景色 (深灰藍) */
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    /* 輕微陰影，增加立體感 */
    /* 移除之前的虛線分隔線 */
    border-bottom: none;
}

.endpoint-nav {
    padding: 0;
}

.endpoint-nav h3,
.endpoint-nav h4 {
    padding-left: 10px;
    /* 與連結對齊 */
}

.endpoint-nav a {
    display: block;
    padding: 0.6rem 10px;
    /* 增加連結的垂直和水平內邊距 */
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    border-left: 3px solid transparent;
    /* 增加標記線寬度 */
    transition: all 0.2s;
}

.endpoint-nav a:hover {
    color: var(--color-text-primary);
    background-color: rgba(var(--color-accent-rgb, 100, 255, 218), 0.05);
    /* 懸停時增加微弱的強調色背景 */
}

.endpoint-nav a.active {
    color: var(--color-accent);
    border-left-color: var(--color-accent);
    background-color: rgba(var(--color-accent-rgb, 100, 255, 218), 0.1);
    /* 選中時增加淺色背景，使其更醒目 */
    font-weight: 600;
}


/* 右側內容區 */

.api-content {
    flex-grow: 1;
    /* 佔據剩餘空間 */
    min-width: 0;
    /* 確保內容不會溢出 */
}

.api-section {
    padding-bottom: 3rem;
    margin-bottom: 3rem;
    border-bottom: 1px dashed var(--color-border);
    /* 虛線分隔，更具文檔感 */
}


/* ========== 程式碼區塊樣式 (終端機風格) ========== */


/* 通用樣式 */

code,
.code-block {
    /* 確保程式碼區塊背景色與 API Section 背景色有區隔 */
    background-color: var(--color-code-bg);
    color: var(--color-code-text);
    padding: 1rem 1.5rem;
    overflow-x: auto;
    white-space: pre-wrap;
}


/* 行內程式碼 */

code {
    background-color: rgba(var(--color-accent-rgb, 30, 64, 175), 0.1);
    /* 使用強調色的半透明背景 */
    color: var(--color-accent);
    padding: 2px 6px;
    white-space: nowrap;
}


/* 程式碼區塊 (pre) */

.code-block {
    background-color: var(--color-code-bg);
    /* 深色/淺色模式下的程式碼背景 */
    color: var(--color-code-text);
    padding: 1rem 1.5rem;
    overflow-x: auto;
    /* 處理長代碼溢出 */
    white-space: pre-wrap;
    /* 允許長行換行 */
}


/* 基礎 URL 區塊，使用更簡潔的樣式 */

.url-base {
    display: block;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    color: var(--color-text-primary);
}


/* 響應 JSON 範例的樣式 */

.json-example {
    /* JSON 關鍵字高亮 (需要 JS 函式庫，這裡僅用顏色模擬) */
    color: var(--color-text-secondary);
}


/* ========== 深色模式覆蓋 (dark-mode.css 中確保程式碼區塊的深色調) ========== */


/* (提醒：在 dark-mode.css 中，您需要確保以下變數已被正確設定為深色值，以維持終端機風格) */


/* .dark {
    --color-code-bg: #1F304B; 
    --color-code-text: #F0F8FF;
    --color-accent-rgb: 100, 255, 218;  
} */