/* ===========================================
   BeaverBuild Docs - Green Accent Theme
   Pure CSS, no NiceGUI / Tailwind dependency
   =========================================== */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --green-50:  #f0fdf4;
    --green-100: #dcfce7;
    --green-500: #22c55e;
    --green-600: #16a34a;
    --green-700: #15803d;
    --green-800: #166534;
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --font-sans: "Microsoft JhengHei", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;
    --max-width: 860px;
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    color: var(--slate-800);
    background: var(--slate-50);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}

/* --- Layout --- */
.doc-container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; }

/* --- Header --- */
.doc-header {
    background: #fff;
    border-bottom: 1px solid var(--slate-200);
    position: sticky; top: 0; z-index: 100;
}
.doc-header-inner {
    max-width: var(--max-width); margin: 0 auto;
    padding: 0 1.25rem;
    display: flex; align-items: center; justify-content: space-between;
    height: 60px;
}
.doc-logo-link {
    display: flex; align-items: center; gap: .5rem;
    text-decoration: none; color: var(--green-700); font-weight: 700; font-size: 1.125rem;
}
.doc-logo-link img { border-radius: 4px; }
.doc-logo-text { color: var(--green-700); }
.doc-nav { display: flex; gap: 1.25rem; }
.doc-nav a {
    text-decoration: none; color: var(--slate-500); font-size: .875rem; font-weight: 500;
    transition: color .15s;
}
.doc-nav a:hover { color: var(--green-600); }

/* --- Breadcrumb --- */
.doc-breadcrumb {
    background: var(--green-50); border-bottom: 1px solid var(--green-100);
    padding: .5rem 0; font-size: .8125rem; color: var(--slate-500);
}
.doc-breadcrumb a { color: var(--green-600); text-decoration: none; }
.doc-breadcrumb a:hover { text-decoration: underline; }
.doc-breadcrumb-sep { margin: 0 .375rem; color: var(--slate-300); }

/* --- Main --- */
.doc-main { padding: 2.5rem 0 4rem; }

/* --- Article Typography --- */
.doc-article h1 {
    font-size: 2rem; font-weight: 800; color: var(--slate-900);
    margin-bottom: .5rem; line-height: 1.3;
    border-bottom: 3px solid var(--green-500); padding-bottom: .5rem;
}
.doc-article h2 {
    font-size: 1.375rem; font-weight: 700; color: var(--slate-800);
    margin-top: 2.5rem; margin-bottom: 1rem;
    padding-left: .75rem;
    border-left: 4px solid var(--green-500);
}
.doc-article h3 {
    font-size: 1.125rem; font-weight: 600; color: var(--slate-700);
    margin-top: 1.75rem; margin-bottom: .75rem;
}
.doc-article p {
    margin-bottom: 1rem; color: var(--slate-700);
}
.doc-article ul, .doc-article ol {
    margin-bottom: 1rem; padding-left: 1.5rem; color: var(--slate-700);
}
.doc-article li { margin-bottom: .375rem; }
.doc-article strong { color: var(--slate-800); font-weight: 600; }
.doc-article code {
    background: var(--slate-100); color: var(--green-700);
    padding: .125rem .375rem; border-radius: 4px;
    font-family: var(--font-mono); font-size: .875em;
}
.doc-article pre {
    background: var(--slate-800); color: #e2e8f0;
    padding: 1.25rem; border-radius: 8px;
    overflow-x: auto; margin-bottom: 1.25rem;
    font-family: var(--font-mono); font-size: .875rem; line-height: 1.6;
}
.doc-article pre code {
    background: none; color: inherit; padding: 0;
}
.doc-article blockquote {
    border-left: 4px solid var(--green-500); background: var(--green-50);
    padding: .75rem 1rem; margin-bottom: 1rem; border-radius: 0 6px 6px 0;
    color: var(--slate-600); font-size: .9375rem;
}
.doc-article hr {
    border: none; border-top: 1px solid var(--slate-200);
    margin: 2rem 0;
}
.doc-article img {
    max-width: 100%; height: auto; border-radius: 8px;
    border: 1px solid var(--slate-200); margin: 1rem 0;
}

/* --- Tables --- */
.doc-article table {
    width: 100%; border-collapse: collapse;
    margin-bottom: 1.5rem; font-size: .875rem;
    border: 1px solid var(--slate-200); border-radius: 8px;
    overflow: hidden;
}
.doc-article thead { background: var(--green-50); }
.doc-article th {
    text-align: left; padding: .625rem .75rem;
    font-weight: 600; color: var(--green-800);
    border-bottom: 2px solid var(--green-500);
    font-size: .8125rem; white-space: nowrap;
}
.doc-article td {
    padding: .5rem .75rem; border-bottom: 1px solid var(--slate-100);
    vertical-align: top;
}
.doc-article tbody tr:hover { background: var(--slate-50); }
.doc-article tbody tr:last-child td { border-bottom: none; }

/* Field name (monospace) */
.doc-article td:nth-child(2) code,
.doc-article td code {
    font-size: .8125rem;
}

/* --- TODO / Placeholder --- */
.doc-article .todo-block {
    background: #fffbeb; border: 1px dashed #f59e0b; border-radius: 8px;
    padding: 1rem 1.25rem; margin: 1rem 0;
    color: #92400e; font-size: .875rem; font-weight: 500;
}

/* --- Index Cards (docs index page) --- */
.doc-index-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem; margin-top: 1.5rem;
}
.doc-index-card {
    background: #fff; border: 1px solid var(--slate-200); border-radius: 12px;
    padding: 1.25rem; text-decoration: none; color: inherit;
    transition: box-shadow .2s, transform .15s;
    border-left: 4px solid var(--green-500);
}
.doc-index-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-2px);
}
.doc-index-card h3 { margin: 0 0 .375rem; font-size: 1rem; color: var(--slate-800); }
.doc-index-card p { margin: 0; font-size: .8125rem; color: var(--slate-500); line-height: 1.5; }

/* --- KaTeX overrides --- */
.katex-display { margin: 1.25rem 0; overflow-x: auto; }

/* --- Footer --- */
.doc-footer {
    background: var(--slate-800); color: var(--slate-400);
    padding: 2rem 0; text-align: center; font-size: .8125rem;
}
.doc-footer a { color: var(--green-500); text-decoration: none; }
.doc-footer a:hover { text-decoration: underline; }
.doc-footer p { margin-bottom: .375rem; }

/* --- RWD --- */
@media (max-width: 640px) {
    .doc-article h1 { font-size: 1.5rem; }
    .doc-article h2 { font-size: 1.125rem; }
    .doc-article table { font-size: .75rem; display: block; overflow-x: auto; }
    .doc-header-inner { padding: 0 .75rem; }
    .doc-container { padding: 0 .75rem; }
    .doc-main { padding: 1.5rem 0 2.5rem; }
}