/* ===========================================================================
   FILENAME : WEB/wwwroot/css/sdkdoc.css
   PURPOSE  : SDK-Doc viewer stylesheet. The "de cine" GitHub/GitLab-flavoured
              markdown preview (ported from fruizcasas/markdowneditor styles.js
              `gitlab` style), made THEME-AWARE: colors map to Radzen --rz-* CSS
              variables so the doc reads correctly in both light and dark themes.
              Two panes: the doc nav tree (left) + the rendered content (right).
              Hoja del visor SDK-Doc. El preview markdown "de cine" (estilo gitlab
              del markdowneditor) hecho THEME-AWARE vía variables --rz-*. Dos panes:
              árbol de nav (izda) + contenido renderizado (dcha).
   AUTHOR   : Fernando Ruiz - Diestro / Don Claudio (Claude.AI) - Fiel Coadjutor
   CODE-BY  : Cortico (Claude-code) - Mozo de Espadas
   DATE     : Junio 2026 - Versión de Motor (Opus 4.8)
   =========================================================================== */

/* ---- Shell (own Documentation layout) ---- */
.sdkdoc-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--rz-base-background-color, #fff);
    color: var(--rz-text-color, #303030);
}

.sdkdoc-topbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--rz-border-color, #e5e5e5);
    background: var(--rz-panel-background-color, var(--rz-base-background-color, #fff));
    flex: 0 0 auto;
}

.sdkdoc-title {
    font-weight: 700;
    font-size: 1.1rem;
}

.sdkdoc-back {
    margin-left: auto;
    text-decoration: none;
    color: var(--rz-primary, #1068bf);
}

.sdkdoc-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;          /* allow children to scroll */
}

/* ---- Left pane: the doc nav tree ---- */
.sdkdoc-nav-pane {
    flex: 0 0 320px;
    overflow: auto;
    padding: 1rem 0.75rem;
    border-right: 1px solid var(--rz-border-color, #e5e5e5);
    background: var(--rz-panel-background-color, var(--rz-base-background-color, #fafafa));
}

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

.sdkdoc-nav > li { padding-left: 0; }

.sdkdoc-navgroup {
    display: block;
    font-weight: 700;
    margin: 0.6rem 0 0.2rem;
    color: var(--rz-text-secondary-color, #666);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.4px;
}

.sdkdoc-navlink {
    display: block;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    cursor: pointer;
    color: var(--rz-text-color, #303030);
    text-decoration: none;
}

.sdkdoc-navlink:hover {
    background: var(--rz-base-200, rgba(0,0,0,0.05));
}

.sdkdoc-navlink.active {
    background: var(--rz-primary-lighter, rgba(16,104,191,0.12));
    color: var(--rz-primary, #1068bf);
    font-weight: 600;
}

/* ---- Right pane: the rendered markdown ("de cine", theme-aware) ---- */
.sdkdoc-content {
    flex: 1 1 auto;
    overflow: auto;
    padding: 1.5rem 2.5rem;
    line-height: 1.6;
    /* NO container max-width — the pane uses the FULL window width (a 980px cap wasted the
       window and cramped wide DAL tables → the doc column got cut). Prose is capped per-element
       below for readability; tables/code/diagrams break out to use all the width. */
}

/* Prose stays a comfortable reading column; wide content (tables/code/diagrams) goes full width. */
.sdkdoc-content > p,
.sdkdoc-content > ul,
.sdkdoc-content > ol,
.sdkdoc-content > h1,
.sdkdoc-content > h2,
.sdkdoc-content > h3,
.sdkdoc-content > blockquote {
    max-width: 1100px;
}

.sdkdoc-error { color: var(--rz-danger, #dc3545); }

.sdkdoc-content h1,
.sdkdoc-content h2 {
    font-weight: 600;
    border-bottom: 1px solid var(--rz-border-color, #e5e5e5);
    padding-bottom: 0.3em;
    margin: 1.5em 0 0.75em;
}
.sdkdoc-content h1 { font-size: 2em; }
.sdkdoc-content h2 { font-size: 1.5em; }
.sdkdoc-content h3 { font-size: 1.25em; font-weight: 600; margin: 1.5em 0 0.5em; }
.sdkdoc-content p  { margin: 0 0 1em; }
.sdkdoc-content a  { color: var(--rz-primary, #1068bf); text-decoration: none; }
.sdkdoc-content a:hover { text-decoration: underline; }

/* Surface backgrounds use a NEUTRAL TRANSLUCENT overlay (not the fixed --rz-base-* scale,
   which is NOT theme-adaptive → light box + light text = invisible in dark). A translucent
   gray lightens a dark page and darkens a light one; text rides --rz-text-color so it always
   contrasts with the ACTIVE theme. Theme-proof in both light and dark. */
.sdkdoc-content code {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 0.9em;
    background: rgba(128, 128, 128, 0.16);
    color: var(--rz-text-color, #303030);
    padding: 0.2em 0.4em;
    border-radius: 4px;
}

.sdkdoc-content pre {
    font-family: 'JetBrains Mono', Consolas, monospace;
    font-size: 0.9em;
    background: rgba(128, 128, 128, 0.10);
    color: var(--rz-text-color, #303030);
    border: 1px solid var(--rz-border-color, #e5e5e5);
    border-radius: 6px;
    padding: 16px;
    overflow-x: auto;
}
.sdkdoc-content pre code { background: transparent; padding: 0; color: inherit; }

.sdkdoc-content blockquote {
    margin: 1em 0;
    padding: 0.5em 1em;
    border-left: 4px solid var(--rz-primary, #1068bf);
    background: rgba(128, 128, 128, 0.10);
    color: var(--rz-text-color, #303030);
}

.sdkdoc-content ul,
.sdkdoc-content ol { margin: 0 0 1em; padding-left: 2em; }
.sdkdoc-content li { margin-bottom: 0.25em; }

.sdkdoc-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
    /* A wide DAL table SCROLLS horizontally inside its own box instead of clipping/cutting the
       last column — display:block lets overflow-x kick in (un-wrappable marked output). */
    display: block;
    overflow-x: auto;
}
.sdkdoc-content th {
    background: rgba(128, 128, 128, 0.12);
    color: var(--rz-text-color, #303030);
    border: 1px solid var(--rz-border-color, #e5e5e5);
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
}
.sdkdoc-content td {
    border: 1px solid var(--rz-border-color, #e5e5e5);
    padding: 10px 12px;
}

.sdkdoc-content hr {
    border: none;
    border-top: 1px solid var(--rz-border-color, #e5e5e5);
    margin: 2em 0;
}
.sdkdoc-content img { max-width: 100%; height: auto; }