/* Shared styling for the i18n Manager documentation pages */
* { box-sizing: border-box; }
body {
    margin: 0; background: #f0f2f4; color: #2d3748;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px; line-height: 1.65;
}

/* Top bar */
.docs-topbar {
    background: #1a2533; color: #fff; padding: 0.8rem 1.5rem;
    display: flex; align-items: center; gap: 0.8rem; position: sticky; top: 0; z-index: 20;
}
.docs-topbar .title { font-weight: 700; font-size: 1rem; letter-spacing: 0.03em; }
.docs-topbar .title i { color: #4db8ff; margin-right: 0.4rem; }
.docs-topbar .links { margin-left: auto; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.docs-topbar a {
    color: #c8d3df; text-decoration: none; font-size: 0.82rem;
    border: 1px solid #3a4a5e; padding: 0.35rem 0.8rem; border-radius: 4px; white-space: nowrap;
}
.docs-topbar a:hover { background: #24364a; color: #fff; }
.docs-topbar a i { color: #4db8ff; margin-right: 0.3rem; }

/* Layout */
.docs-layout { display: flex; max-width: 1180px; margin: 0 auto; align-items: flex-start; }
.docs-sidebar {
    width: 260px; flex-shrink: 0; position: sticky; top: 64px; align-self: flex-start;
    max-height: calc(100vh - 64px); overflow-y: auto; padding: 1.5rem 1rem; font-size: 0.86rem;
}
.docs-sidebar h2 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #718096; margin: 1.2rem 0 0.4rem; }
.docs-sidebar a { display: block; color: #4a5568; text-decoration: none; padding: 0.28rem 0.5rem; border-radius: 4px; border-left: 2px solid transparent; }
.docs-sidebar a:hover { background: #e7ecf2; color: #1a6fb5; }

.docs-main { flex: 1; min-width: 0; background: #fff; border: 1px solid #d8dde3; border-radius: 8px; margin: 1.5rem; padding: 2rem 2.4rem; }
.docs-main h1 { font-size: 1.7rem; color: #1a2533; margin: 0 0 0.3rem; }
.docs-lead { color: #718096; font-size: 1rem; margin: 0 0 1.6rem; }
.docs-main h2 { font-size: 1.25rem; color: #1a2533; margin: 2.2rem 0 0.7rem; padding-bottom: 0.35rem; border-bottom: 2px solid #eef1f5; scroll-margin-top: 70px; }
.docs-main h3 { font-size: 1.02rem; color: #24364a; margin: 1.4rem 0 0.5rem; scroll-margin-top: 70px; }
.docs-main p { margin: 0.5rem 0; }
.docs-main ul, .docs-main ol { margin: 0.5rem 0; padding-left: 1.4rem; }
.docs-main li { margin: 0.3rem 0; }
.docs-main code { background: #f0f4f8; color: #b83280; padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.86em; font-family: "SF Mono", "Courier New", monospace; }
.docs-main pre { background: #1a2533; color: #e2e8f0; padding: 1rem 1.2rem; border-radius: 6px; overflow-x: auto; font-size: 0.82rem; line-height: 1.5; }
.docs-main pre code { background: transparent; color: inherit; padding: 0; }
.docs-main a { color: #1a6fb5; }

/* Tables */
.docs-table { width: 100%; border-collapse: collapse; margin: 0.8rem 0; font-size: 0.86rem; }
.docs-table th { background: #1a2533; color: #c8d3df; text-align: left; padding: 0.55rem 0.7rem; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; }
.docs-table td { padding: 0.5rem 0.7rem; border-bottom: 1px solid #eaecef; vertical-align: top; }
.docs-table tr:nth-child(even) td { background: #f8fafc; }
.docs-table code { white-space: nowrap; }

/* Callouts */
.note { border-left: 4px solid #1a6fb5; background: #eef5fb; padding: 0.7rem 1rem; border-radius: 0 6px 6px 0; margin: 1rem 0; }
.note.warn { border-left-color: #c05621; background: #fdf3ec; }
.note.tip { border-left-color: #276749; background: #eef8f1; }
.note strong { display: inline-block; margin-bottom: 0.1rem; }

.method { font-weight: 700; font-size: 0.72rem; padding: 1px 6px; border-radius: 4px; color: #fff; }
.method.get { background: #2b6cb0; }
.method.post { background: #276749; }

.step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #1a6fb5; color: #fff;
    font-size: 0.78rem; font-weight: 700; margin-right: 0.4rem;
}

footer.docs-footer { max-width: 1180px; margin: 0 auto; padding: 1rem 1.5rem 2.5rem; color: #a0aec0; font-size: 0.8rem; }

@media (max-width: 860px) {
    .docs-sidebar { display: none; }
    .docs-main { margin: 1rem; padding: 1.4rem; }
}