/* drawlib Modern Developer Light Theme (default.css)
 * Inspired by VitePress (Vue/Vite) & Tailwind CSS documentation
 */
:root {
    --rtd-sidebar-bg: #f8fafc;
    --rtd-sidebar-header: #f8fafc;
    --rtd-sidebar-text: #475569;
    --rtd-sidebar-hover: #f1f5f9;
    --rtd-sidebar-active: #eef2ff;
    --rtd-sidebar-active-text: #4338ca;
    --rtd-brand-color: #4f46e5;
    --rtd-brand-dark: #3730a3;
    --rtd-heading-color: #0f172a;
    --rtd-text-color: #334155;
    --rtd-muted-color: #64748b;
    --rtd-bg-color: #f8fafc;
    --rtd-content-bg: #ffffff;
    --rtd-surface-bg: #f1f5f9;
    --rtd-border-color: #e2e8f0;
    --rtd-code-bg: #f8fafc;
    --rtd-inline-code-bg: #eef2ff;
    --rtd-inline-code-color: #4338ca;
    --rtd-note-bg: #eef2ff;
    --rtd-note-border: #6366f1;
    --rtd-code-keyword: #4f46e5;
    --rtd-code-string: #16a34a;
    --rtd-code-comment: #64748b;
    --rtd-code-number: #d97706;
    --rtd-code-function: #2563eb;
    --rtd-code-type: #9333ea;
    --rtd-code-operator: #475569;
    --rtd-code-builtin: #0284c7;
    --rtd-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", Meiryo, system-ui, sans-serif;
    --rtd-mono-font: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Noto Sans Mono CJK JP", monospace;
    --sidebar-width: 280px;

  --slide-primary: #4f46e5;
  --slide-secondary: #16a34a;
  --slide-accent: #d97706;
  --slide-yellow: #f59e0b;
  --slide-border: #e2e8f0;
  --slide-card-bg: #f8fafc;
  --slide-code-bg: #1e1b4b;
  --slide-code-text: #e0e7ff;
}

html[data-theme="dark"] {
    --rtd-sidebar-bg: #090d16;
    --rtd-sidebar-header: #090d16;
    --rtd-sidebar-text: #94a3b8;
    --rtd-sidebar-hover: #1e293b;
    --rtd-sidebar-active: #1e1b4b;
    --rtd-sidebar-active-text: #a5b4fc;
    --rtd-brand-color: #818cf8;
    --rtd-brand-dark: #6366f1;
    --rtd-heading-color: #f1f5f9;
    --rtd-text-color: #e2e8f0;
    --rtd-muted-color: #94a3b8;
    --rtd-bg-color: #090d16;
    --rtd-content-bg: #0f172a;
    --rtd-surface-bg: #1e293b;
    --rtd-border-color: #334155;
    --rtd-code-bg: #090d16;
    --rtd-inline-code-bg: #1e1b4b;
    --rtd-inline-code-color: #a5b4fc;
    --rtd-note-bg: #1e1b4b;
    --rtd-note-border: #6366f1;
    --rtd-code-keyword: #818cf8;
    --rtd-code-string: #4ade80;
    --rtd-code-comment: #94a3b8;
    --rtd-code-number: #fbbf24;
    --rtd-code-function: #60a5fa;
    --rtd-code-type: #c084fc;
    --rtd-code-operator: #cbd5e1;
    --rtd-code-builtin: #38bdf8;

    --slide-card-bg: #1e293b;
    --slide-border: #334155;
}



/* drawlib Code Highlighting and Code Blocks */
code {
    font-family: var(--rtd-mono-font);
    font-size: 0.88em;
    background-color: var(--rtd-inline-code-bg);
    color: var(--rtd-inline-code-color);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-weight: 500;
}

pre {
    background-color: var(--rtd-code-bg);
    border: 1px solid var(--rtd-border-color);
    border-radius: 8px;
    padding: 1.25rem;
    overflow-x: auto;
    font-size: 0.9em;
    line-height: 1.5;
}

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

/* Pygments syntax highlighting tokens */
pre code .k, pre code .kc, pre code .kd, pre code .kn, pre code .kp, pre code .kr, pre code .kt { color: var(--rtd-code-keyword); font-weight: 600; }
pre code .s, pre code .sa, pre code .sb, pre code .sc, pre code .dl, pre code .sd, pre code .s2, pre code .se, pre code .sh, pre code .si, pre code .sx, pre code .sr, pre code .s1, pre code .ss { color: var(--rtd-code-string); }
pre code .c, pre code .ch, pre code .cm, pre code .cp, pre code .cpf, pre code .c1, pre code .cs { color: var(--rtd-code-comment); font-style: italic; }
pre code .m, pre code .mb, pre code .mf, pre code .mh, pre code .mi, pre code .mo, pre code .il { color: var(--rtd-code-number); }
pre code .nf, pre code .fm { color: var(--rtd-code-function); }
pre code .nc, pre code .ne, pre code .nn, pre code .nt { color: var(--rtd-code-type); font-weight: 600; }
pre code .na, pre code .nd, pre code .py { color: var(--rtd-code-type); font-weight: 600; }
pre code .nb, pre code .bp { color: var(--rtd-code-builtin); }
pre code .o, pre code .ow { color: var(--rtd-code-operator); }
pre code .err { color: #ef4444; }


/* drawlib Markdown Typography and Content Elements */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--rtd-font);
    font-size: 16px;
    line-height: 1.65;
    color: var(--rtd-text-color);
    background-color: var(--rtd-bg-color);
    margin: 0;
    padding: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--rtd-font);
    color: var(--rtd-heading-color);
    margin-top: 2.2rem;
    margin-bottom: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

h1 {
    font-size: 2.25rem;
    margin-top: 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--rtd-border-color);
}

h2 {
    font-size: 1.65rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--rtd-border-color);
}

h3 {
    font-size: 1.35rem;
}

h4 {
    font-size: 1.15rem;
}

p {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

a {
    color: var(--rtd-brand-color);
    text-decoration: none;
    font-weight: 500;
}

a:hover {
    color: var(--rtd-brand-dark);
    text-decoration: underline;
}

ul, ol {
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding-left: 2rem;
}

li {
    margin-bottom: 0.4rem;
}

li > ul, li > ol {
    margin-top: 0.4rem;
    margin-bottom: 0;
}

hr {
    border: none;
    border-top: 1px solid var(--rtd-border-color);
    margin: 2rem 0;
}

blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background-color: var(--rtd-note-bg);
    border-left: 4px solid var(--rtd-note-border);
    color: var(--rtd-text-color);
    border-radius: 0 8px 8px 0;
}

blockquote p {
    margin: 0;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.5rem 0;
    font-size: 0.95rem;
    border: 1px solid var(--rtd-border-color);
    border-radius: 8px;
    overflow: hidden;
}

th, td {
    border-bottom: 1px solid var(--rtd-border-color);
    padding: 0.75rem 1rem;
    text-align: left;
}

tr:last-child td {
    border-bottom: none;
}

th {
    font-family: var(--rtd-font);
    background-color: var(--rtd-surface-bg);
    color: var(--rtd-heading-color);
    font-weight: 600;
}

tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

.drawlib-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
    padding: 1.25rem;
    background-color: #ffffff;
    border: 1px solid var(--rtd-border-color);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.drawlib-image img, .drawlib-image svg {
    max-width: 100%;
    height: auto;
    display: block;
}

.drawlib-caption {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--rtd-muted-color, #64748b);
    text-align: center;
    font-weight: 500;
    line-height: 1.4;
}

details.drawlib-code-details {
    margin: 1rem 0 2rem 0;
    border: 1px solid var(--rtd-border-color);
    border-radius: 8px;
    background-color: var(--rtd-code-bg);
    overflow: hidden;
}

.drawlib-image + details.drawlib-code-details {
    margin-top: -1rem;
}

details.drawlib-code-details summary {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--rtd-muted-color);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

details.drawlib-code-details summary:hover {
    color: var(--rtd-heading-color);
    background-color: var(--rtd-surface-bg);
}

details.drawlib-code-details[open] summary {
    border-bottom: 1px solid var(--rtd-border-color);
}

details.drawlib-code-details pre {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Admonition / Callout boxes */
.admonition {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--rtd-brand-color);
    background-color: var(--rtd-note-bg);
    border-radius: 0 8px 8px 0;
}

.admonition-title {
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--rtd-heading-color);
}


/* drawlib Web Documentation Site Layout (targets/site.css) */
.doc-layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    background-color: var(--rtd-sidebar-bg);
    flex-shrink: 0;
    border-right: 1px solid var(--rtd-border-color);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
}

.sidebar-header {
    background-color: var(--rtd-sidebar-header);
    border-bottom: 1px solid var(--rtd-border-color);
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.site-title,
.sidebar-brand {
    font-family: var(--rtd-font);
    color: var(--rtd-heading-color);
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.site-title:hover,
.sidebar-brand:hover {
    color: var(--rtd-brand-color);
    text-decoration: none;
}

.sidebar-logo {
    height: 42px;
    width: auto;
    max-width: 100%;
    display: block;
    object-fit: contain;
    border-radius: 6px;
}

/* Theme Toggle Button */
.theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--rtd-border-color);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--rtd-muted-color);
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.theme-toggle-btn:hover {
    background-color: var(--rtd-sidebar-hover);
    color: var(--rtd-brand-color);
    border-color: var(--rtd-brand-color);
}

.theme-toggle-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-toggle-btn .icon-sun { display: none; }
.theme-toggle-btn .icon-moon { display: block; }

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .theme-toggle-btn .icon-sun { display: block !important; }
    html:not([data-theme="light"]) .theme-toggle-btn .icon-moon { display: none !important; }
}

html[data-theme="light"] .theme-toggle-btn .icon-sun { display: none !important; }
html[data-theme="light"] .theme-toggle-btn .icon-moon { display: block !important; }

html[data-theme="dark"] .theme-toggle-btn .icon-sun { display: block !important; }
html[data-theme="dark"] .theme-toggle-btn .icon-moon { display: none !important; }

/* Base default: Light logo visible, Dark logo hidden */
.sidebar-logo-light {
    display: block;
}

.sidebar-logo-dark {
    display: none;
}

/* Fallback for OS Dark mode when no explicit data-theme="light" is set */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .sidebar-logo-light {
        display: none !important;
    }
    html:not([data-theme="light"]) .sidebar-logo-dark {
        display: block !important;
    }
}

/* Explicit Light Mode Override: ALWAYS show light logo and hide dark logo */
html[data-theme="light"] .sidebar-logo-light,
.light .sidebar-logo-light {
    display: block !important;
}

html[data-theme="light"] .sidebar-logo-dark,
.light .sidebar-logo-dark {
    display: none !important;
}

/* Explicit Dark Mode Override: ALWAYS show dark logo and hide light logo */
html[data-theme="dark"] .sidebar-logo-light,
.dark .sidebar-logo-light {
    display: none !important;
}

html[data-theme="dark"] .sidebar-logo-dark,
.dark .sidebar-logo-dark {
    display: block !important;
}

.nav-tree,
.sidebar-menu {
    padding: 1rem 0;
    flex: 1;
}

.nav-section {
    margin-bottom: 1.25rem;
}

.nav-section-title,
.sidebar-heading {
    font-family: var(--rtd-font);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--rtd-muted-color);
    padding: 0.5rem 1.5rem;
    margin-top: 0.5rem;
}

.nav-items,
.nav-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem 0;
}

.nav-item {
    margin: 0;
}

.nav-item a {
    font-family: var(--rtd-font);
    color: var(--rtd-sidebar-text);
    display: block;
    padding: 0.55rem 1.25rem;
    margin: 2px 0.5rem;
    font-size: 0.92rem;
    text-decoration: none;
    border-radius: 6px;
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-item a:hover {
    background-color: var(--rtd-sidebar-hover);
    color: var(--rtd-heading-color);
}

.nav-item.active a {
    background-color: var(--rtd-sidebar-active);
    color: var(--rtd-sidebar-active-text);
    font-weight: 600;
    border-left-color: var(--rtd-brand-color);
}

.content-wrapper {
    flex: 1;
    background-color: var(--rtd-content-bg);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.top-bar {
    background-color: var(--rtd-content-bg);
    border-bottom: 1px solid var(--rtd-border-color);
    padding: 1rem 2.5rem;
    font-size: 0.9rem;
}

.breadcrumbs {
    font-family: var(--rtd-font);
    color: var(--rtd-muted-color);
}

.crumb {
    color: var(--rtd-brand-color);
    font-weight: 600;
}

.crumb.active {
    color: var(--rtd-text-color);
    font-weight: 400;
}

.crumb-separator {
    margin: 0 0.4rem;
    color: var(--rtd-border-color);
}

.main-content {
    padding: 2.5rem 3rem 4rem 3rem;
    max-width: 960px;
    flex: 1;
}

.footer {
    border-top: 1px solid var(--rtd-border-color);
    padding: 1.75rem 2.5rem;
    font-size: 0.85rem;
    color: var(--rtd-muted-color);
    text-align: center;
}

@media (max-width: 768px) {
    .doc-layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
        position: static;
        border-right: none;
        border-bottom: 1px solid var(--rtd-border-color);
    }

    .main-content {
        padding: 1.5rem;
    }
}

/* Print & PDF Export Immunity: Ensure clean Light Mode in printed / PDF documents */
@media print {
    #theme-toggle {
        display: none !important;
    }

    html[data-theme="dark"] {
        --rtd-sidebar-bg: #f8fafc;
        --rtd-sidebar-header: #f8fafc;
        --rtd-sidebar-text: #475569;
        --rtd-sidebar-hover: #f1f5f9;
        --rtd-sidebar-active: #eef2ff;
        --rtd-sidebar-active-text: #4338ca;
        --rtd-brand-color: #4f46e5;
        --rtd-brand-dark: #3730a3;
        --rtd-heading-color: #0f172a;
        --rtd-text-color: #334155;
        --rtd-muted-color: #64748b;
        --rtd-bg-color: #f8fafc;
        --rtd-content-bg: #ffffff;
        --rtd-surface-bg: #f1f5f9;
        --rtd-border-color: #e2e8f0;
        --rtd-code-bg: #f8fafc;
        --rtd-inline-code-bg: #eef2ff;
        --rtd-inline-code-color: #4338ca;
        --rtd-note-bg: #eef2ff;
        --rtd-note-border: #6366f1;
    }

    html[data-theme="dark"] .sidebar-logo-light {
        display: block !important;
    }

    html[data-theme="dark"] .sidebar-logo-dark {
        display: none !important;
    }
}