/*
 * Output module application-theme and workspace layout bridge.
 *
 * Presentation only: Bootstrap tab IDs, field IDs, autosave handlers and the
 * persisted Output configuration schema remain owned by the existing module.
 */

body.output-body {
    --ob-bg: var(--pp-app-bg, #f4f6fb);
    --ob-surface: var(--pp-surface, #ffffff);
    --ob-surface-2: var(--pp-surface-soft, #f8fafc);
    --ob-border: var(--pp-border, #e2e8f0);
    --ob-border-2: var(--pp-border, #eef1f6);
    --ob-ink: var(--pp-text, #1e293b);
    --ob-ink-2: color-mix(in srgb, var(--pp-text, #1e293b) 76%, var(--pp-text-muted, #475569));
    --ob-muted: var(--pp-text-muted, #7c8798);
    --ob-primary: var(--pp-accent, #4f46e5);
    --ob-primary-2: color-mix(in srgb, var(--pp-accent, #6366f1) 82%, white);
    --ob-sidebar-w: 258px;
    --ob-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
    --ob-shadow-lg: 0 12px 30px rgba(16, 24, 40, .10);
    color-scheme: light;
}

html[data-pp-theme="dark"] body.output-body {
    --ob-bg: var(--pp-app-bg, #0b1120);
    --ob-surface: var(--pp-surface, #111827);
    --ob-surface-2: var(--pp-surface-soft, #172033);
    --ob-border: var(--pp-border, #2b3a52);
    --ob-border-2: var(--pp-border, #2b3a52);
    --ob-ink: var(--pp-text, #e7edf7);
    --ob-ink-2: color-mix(in srgb, var(--pp-text, #e7edf7) 76%, var(--pp-text-muted, #9cabc1));
    --ob-muted: var(--pp-text-muted, #9cabc1);
    --ob-shadow: 0 1px 2px rgba(0, 0, 0, .32);
    --ob-shadow-lg: 0 14px 34px rgba(0, 0, 0, .42);
    color-scheme: dark;
}

body.output-body .right-workspace {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--ob-bg);
    color: var(--ob-ink);
}

body.output-body .ob-layout {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* Fixed module navigation; the project navigation remains outside this scope. */
body.output-body .ob-sidebar {
    position: relative;
    z-index: 2;
    display: flex;
    flex: 0 0 var(--ob-sidebar-w);
    width: var(--ob-sidebar-w);
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    background: var(--ob-surface);
    border-right: 1px solid var(--ob-border);
    color: var(--ob-ink);
}

body.output-body .ob-toolbar {
    position: static;
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: 13px 15px;
    background: var(--ob-surface);
    border-bottom: 1px solid var(--ob-border);
    backdrop-filter: none;
}
body.output-body .ob-toolbar-brand { gap: 10px; }
body.output-body .ob-toolbar-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 12px;
}
body.output-body .ob-toolbar-titles h6 { color: var(--ob-ink); line-height: 1.15; }
body.output-body .ob-toolbar-sub {
    display: block;
    max-width: 170px;
    margin-top: 3px;
    color: var(--ob-muted);
    font-size: 10.5px;
    line-height: 1.3;
}

body.output-body .ob-tabs {
    display: flex;
    width: auto;
    margin: 12px 10px;
    padding: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 5px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
body.output-body .ob-tabs .nav-item { width: 100%; }
body.output-body .ob-tabs .nav-link {
    display: flex;
    width: 100%;
    min-height: 58px;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--ob-ink-2);
    text-align: left;
}
body.output-body .ob-tabs .nav-link:hover {
    background: var(--ob-surface-2);
    border-color: var(--ob-border);
    color: var(--ob-ink);
}
body.output-body .ob-tabs .nav-link.active {
    color: var(--ob-primary);
    background: color-mix(in srgb, var(--ob-primary) 11%, var(--ob-surface));
    border-color: color-mix(in srgb, var(--ob-primary) 34%, var(--ob-border));
    box-shadow: inset 3px 0 var(--ob-primary);
}
html[data-pp-theme="dark"] body.output-body .ob-tabs .nav-link.active {
    color: var(--ob-primary);
    background: color-mix(in srgb, var(--ob-primary) 17%, var(--ob-surface));
    border-color: color-mix(in srgb, var(--ob-primary) 42%, var(--ob-border));
}
body.output-body .ob-tab-icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: color-mix(in srgb, var(--ob-primary) 10%, var(--ob-surface));
    color: var(--ob-primary);
}
body.output-body .ob-tab-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; }
body.output-body .ob-tab-copy strong { font-size: 12.5px; line-height: 1.2; }
body.output-body .ob-tab-copy small {
    margin-top: 2px;
    overflow: hidden;
    color: var(--ob-muted);
    font-size: 9.5px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.output-body .ob-tab-arrow { color: var(--ob-muted); font-size: 11px; }

body.output-body .ob-sidebar-foot {
    margin-top: auto;
    padding: 12px;
    border-top: 1px solid var(--ob-border);
    background: var(--ob-surface-2);
}
body.output-body .ob-sidebar-caption {
    display: block;
    margin: 0 2px 8px;
    color: var(--ob-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
body.output-body .ob-toolbar-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px;
    margin: 0;
}
body.output-body .ob-save-pill,
body.output-body .ob-guide-btn {
    min-width: 0;
    justify-content: center;
    padding: 7px 9px;
}
body.output-body .ob-save-pill { overflow: hidden; text-overflow: ellipsis; }
body.output-body .ob-save-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.output-body .ob-guide-btn { background: color-mix(in srgb, var(--ob-primary) 10%, var(--ob-surface)); }

/* This is the only page scroller. min-height:0 is essential inside flex. */
body.output-body .ob-content-scroll {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    background: var(--ob-bg);
}
body.output-body .ob-content {
    max-width: 1160px;
    margin: 0 auto;
    padding: 20px 24px 64px;
}

body.output-body :is(.ob-card, .ob-card-head, .ob-card-body, .ob-stat, .ob-presets) {
    border-color: var(--ob-border);
}
body.output-body .ob-card { background: var(--ob-surface); color: var(--ob-ink); }
body.output-body .ob-card-head,
body.output-body .ob-stat,
body.output-body .ob-presets { background: var(--ob-surface-2); }
body.output-body :is(.ob-card-head h6, .ob-label, .ob-switch-text b, .ob-stat-value) { color: var(--ob-ink); }
body.output-body :is(.ob-card-head p, .ob-hint, .ob-switch-text small, .ob-stat-label, .ob-preset-note) { color: var(--ob-muted); }
body.output-body .ob-preset,
body.output-body .ob-head-btn {
    background: var(--ob-surface);
    border-color: var(--ob-border);
    color: var(--ob-ink-2);
}
body.output-body .ob-content :is(.form-control, .form-select, .input-group-text, .btn-outline-secondary) {
    background-color: var(--pp-input-bg, var(--ob-surface));
    border-color: var(--ob-border);
    color: var(--ob-ink);
}
body.output-body .ob-content :is(.form-control, .form-select)::placeholder { color: var(--ob-muted); }
body.output-body .ob-content .dropdown-menu {
    background: var(--ob-surface);
    border-color: var(--ob-border);
    color: var(--ob-ink);
}
body.output-body .ob-content .dropdown-item { color: var(--ob-ink); }
body.output-body .ob-content .dropdown-item:hover { background: var(--ob-surface-2); }

html[data-pp-theme="dark"] body.output-body .ob-hint code,
html[data-pp-theme="dark"] body.output-body .ob-switch-text code,
html[data-pp-theme="dark"] body.output-body .ob-card-body code {
    background: var(--pp-accent-soft);
    color: var(--ob-primary);
}
html[data-pp-theme="dark"] body.output-body .ob-callout.warn { background: #332814; color: #fcd34d; }
html[data-pp-theme="dark"] body.output-body .ob-callout.info { background: #172b4d; color: #bfdbfe; }

/* Guide surfaces inherit the selected application theme. */
body.output-body .obh-modal,
body.output-body .obh-content { background: var(--ob-surface); color: var(--ob-ink); }
body.output-body .obh-toc { background: var(--ob-surface-2); border-color: var(--ob-border); }
body.output-body .obh-toc a { color: var(--ob-ink-2); }
body.output-body .obh-toc a:hover,
body.output-body .obh-toc a.active { background: color-mix(in srgb, var(--ob-primary) 12%, var(--ob-surface)); color: var(--ob-primary); }
body.output-body .obh-content :is(h3, h4) { color: var(--ob-ink); }
body.output-body .obh-content :is(p, ul, ol, .obh-lead) { color: var(--ob-ink-2); }
body.output-body .obh-table :is(th, td) { border-color: var(--ob-border); color: var(--ob-ink-2); }
body.output-body .obh-table th { background: var(--ob-surface-2); }
body.output-body .obh-table tr:hover td { background: var(--ob-surface-2); }
body.output-body .obh-foot { border-color: var(--ob-border); color: var(--ob-muted); }

/* ── Tooltips (theme-aware, readable) ──────────────────────────────── */
.tooltip.ob-tip { --bs-tooltip-max-width: 264px; opacity: 1; }
.tooltip.ob-tip .tooltip-inner {
    max-width: var(--bs-tooltip-max-width);
    padding: 8px 11px;
    font-size: 11.5px;
    line-height: 1.5;
    text-align: left;
    color: var(--pp-text, #f8fafc);
    background: var(--pp-surface-raised, #1f2937);
    border: 1px solid var(--pp-border, rgba(148, 163, 184, .28));
    border-radius: 9px;
    box-shadow: 0 12px 30px rgba(2, 6, 23, .32);
}
.tooltip.ob-tip .tooltip-arrow::before { border-top-color: var(--pp-surface-raised, #1f2937); }
.tooltip.ob-tip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.ob-tip[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: var(--pp-surface-raised, #1f2937); }
.tooltip.ob-tip[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: var(--pp-surface-raised, #1f2937); }
.tooltip.ob-tip[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: var(--pp-surface-raised, #1f2937); }

@media (max-width: 900px) {
    body.output-body .ob-layout { flex-direction: column; }
    body.output-body .ob-sidebar {
        flex: 0 0 auto;
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid var(--ob-border);
    }
    body.output-body .ob-toolbar { min-height: 58px; padding: 8px 12px; }
    body.output-body .ob-toolbar-icon { width: 36px; height: 36px; flex-basis: 36px; }
    body.output-body .ob-toolbar-sub { max-width: none; }
    body.output-body .ob-tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin: 7px 10px; }
    body.output-body .ob-tabs .nav-link { min-height: 44px; justify-content: center; padding: 5px 8px; }
    body.output-body .ob-tab-copy small,
    body.output-body .ob-tab-arrow { display: none; }
    body.output-body .ob-tab-copy { flex: 0 1 auto; }
    body.output-body .ob-sidebar-foot { display: none; }
}

@media (max-width: 575.98px) {
    body.output-body .ob-toolbar-sub { display: none; }
    body.output-body .ob-content { padding: 14px 12px 48px; }
    body.output-body .ob-tab-icon { width: 28px; height: 28px; flex-basis: 28px; }
    body.output-body .ob-tabs .nav-link { gap: 5px; }
    body.output-body .ob-tab-copy strong { font-size: 11px; }
}
