/* Full viewport, scalable layout */
html {
    box-sizing: border-box;
    height: 100%;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    min-height: 100%;
    width: 100%;
    padding: 0;
    color: #333;
    display: flex;
    flex-direction: column;
}

/* Main content area: full width */
.container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    padding: 1rem clamp(1rem, 4vw, 2rem) 2rem;
}

@media (max-width: 640px) {
    .container { padding: 0.75rem 1rem 1rem; }
}

/* Home (readme) view: scrollable, readable max-width for long lines */
#home.view-active,
#home.tab-content.active {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
}

/* Endpoints view: fixed height so only left/right panels scroll, not the page */
#endpoints.view-active,
#endpoints.tab-content.active {
    flex: 1;
    min-height: 0;
    max-height: calc(100vh - 6rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Endpoints two-panel wrapper: no page scroll, panels scroll inside */
.endpoints-two-panel {
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

/* Each panel scrolls independently; scrollbar only in the panel under the cursor */
.endpoints-tree-panel,
.endpoint-detail-panel {
    min-height: 0;
}

pre {
    background-color: #f6f8fa;
    border-radius: 6px;
    padding: 16px;
    overflow: auto;
}

code {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 85%;
    background-color: #f6f8fa;
    padding: 0.2em 0.4em;
    border-radius: 3px;
}

pre code {
    background-color: transparent;
    padding: 0;
}

h1, h2, h3, h4 {
    margin-top: 24px;
    margin-bottom: 16px;
    font-weight: 600;
    line-height: 1.25;
}

h1 { font-size: 2em; padding-bottom: .3em; border-bottom: 1px solid #eaecef; }
h2 { font-size: 1.5em; padding-bottom: .3em; border-bottom: 1px solid #eaecef; }
h3 { font-size: 1.25em; }
h4 { font-size: 1em; }

a { color: #0366d6; text-decoration: none; }
a:hover { text-decoration: underline; }

table {
    border-spacing: 0;
    border-collapse: collapse;
    margin: 1em 0;
}

table th, table td {
    padding: 6px 13px;
    border: 1px solid #dfe2e5;
}

table tr:nth-child(2n) {
    background-color: #f6f8fa;
}

.endpoint {
    margin: 2em 0;
    padding: 1em;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
}

.endpoint-header {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-bottom: 1em;
}

.method {
    padding: 0.2em 0.6em;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.9em;
}

.method-get { background-color: #e3f2fd; color: #1976d2; }
.method-post { background-color: #e8f5e9; color: #388e3c; }
.method-put { background-color: #fff3e0; color: #f57c00; }
.method-delete { background-color: #ffebee; color: #d32f2f; }
.method-patch { background-color: #f3e5f5; color: #7b1fa2; }

.endpoint-path {
    font-family: monospace;
    font-size: 1.1em;
}

.endpoint-description {
    margin: 1em 0;
    color: #666;
}

.response-schema {
    margin-top: 1em;
}

.response-schema pre {
    margin: 0;
}

.schema-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.9em;
}

.schema-table th {
    background-color: #f6f8fa;
    padding: 8px 12px;
    text-align: left;
    border: 1px solid #dfe2e5;
    font-weight: 600;
}

.schema-table td {
    padding: 8px 12px;
    border: 1px solid #dfe2e5;
    vertical-align: top;
}

.schema-table tr:nth-child(even) {
    background-color: #f6f8fa;
}

.schema-table .nested {
    padding-left: 20px;
    color: #666;
}

.schema-table td:nth-child(2) {
    font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    color: #0366d6;
}

.schema-table td:nth-child(3) {
    color: #666;
}

.toggle-schema, .download-json {
    margin-left: auto;
    padding: 4px 8px;
    background-color: #f6f8fa;
    border: 1px solid #e1e4e8;
    border-radius: 4px;
    color: #24292e;
    font-size: 0.9em;
    cursor: pointer;
    transition: background-color 0.2s;
}

.toggle-schema:hover, .download-json:hover {
    background-color: #e1e4e8;
}

.toggle-schema.expanded {
    background-color: #e1e4e8;
}

.tabs {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid #e1e4e8;
}

.tab {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    margin-right: 5px;
    color: #586069;
    font-weight: 500;
}

.tab:hover {
    color: #24292e;
}

.tab.active {
    background-color: #fff;
    border-color: #e1e4e8;
    border-bottom-color: #fff;
    margin-bottom: -1px;
    color: #24292e;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.folder-section {
    margin: 2em 0;
    border: 1px solid #e1e4e8;
    border-radius: 6px;
    overflow: hidden;
}

.folder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    background-color: #f6f8fa;
    cursor: pointer;
}

.folder-header h3 {
    margin: 0;
    color: #24292e;
}

.toggle-folder {
    background: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
    padding: 0.5em;
    transition: transform 0.3s;
}

.folder-content {
    padding: 1em;
}

.folder-content.collapsed {
    display: none;
}

.endpoints-section {
    margin: 2em 0;
}

.endpoints-container {
    display: flex;
    flex-direction: column;
    gap: 1em;
}