/*
 * Custom Files application-theme bridge.
 *
 * Presentation only. File operations, path validation, editor state and build
 * copying remain owned by CustomFilesController and custom-files-spa.js.
 */

body.cf-body {
    --cf-head-h: 54px;
    --cf-text: var(--pp-text, #0f172a);
    --cf-input: var(--pp-input-bg, #ffffff);
    --cf-raised: var(--pp-surface-raised, #ffffff);
    --cf-hover: var(--pp-surface-muted, #f8fafc);
    --cf-row-border: #f1f5f9;
    --cf-code-bg: #f8fafc;
    --cf-code-raised: #ffffff;
    --cf-code-soft: #f1f5f9;
    --cf-code-border: #dbe3ee;
    --cf-code-text: #1e293b;
    --cf-code-muted: #64748b;
    --cf-code-subtle: #94a3b8;
    --cf-code-accent: #7c3aed;
    --cf-code-selection: #dbeafe;
    color-scheme: light;
}

html[data-pp-theme="dark"] body.cf-body {
    --cf-primary: var(--pp-accent, #60a5fa);
    --cf-border: var(--pp-border, #2b3a52);
    --cf-muted: var(--pp-text-muted, #9cabc1);
    --cf-bg: var(--pp-app-bg, #0b1120);
    --cf-surface: var(--pp-surface, #111827);
    --cf-text: var(--pp-text, #e7edf7);
    --cf-input: var(--pp-input-bg, #101827);
    --cf-raised: var(--pp-surface-raised, #172033);
    --cf-hover: var(--pp-surface-muted, #1e293b);
    --cf-row-border: var(--pp-border, #2b3a52);
    --cf-psoft: var(--pp-accent-soft, #172b4d);
    --cf-code-bg: var(--pp-input-bg, #101827);
    --cf-code-raised: var(--pp-surface-raised, #172033);
    --cf-code-soft: var(--pp-surface-muted, #1e293b);
    --cf-code-border: var(--pp-border, #2b3a52);
    --cf-code-text: var(--pp-text, #e7edf7);
    --cf-code-muted: var(--pp-text-muted, #9cabc1);
    --cf-code-subtle: color-mix(in srgb, var(--pp-text-muted, #9cabc1) 72%, transparent);
    --cf-code-accent: var(--pp-accent, #60a5fa);
    --cf-code-selection: color-mix(in srgb, var(--pp-accent, #60a5fa) 26%, var(--pp-input-bg, #101827));
    /* CodeMirror syntax tokens — dark palette (Catppuccin-ish) */
    --cf-tok-com: #6c7086; --cf-tok-key: #cba6f7; --cf-tok-str: #a6e3a1; --cf-tok-num: #fab387;
    --cf-tok-fn: #89b4fa; --cf-tok-var: #f9e2af; --cf-tok-tag: #f38ba8; --cf-tok-atr: #f9e2af;
    --cf-tok-prop: #89dceb; --cf-tok-punc: #9399b2; --cf-tok-atom: #fab387;
    color: var(--cf-text);
    color-scheme: dark;
}

/* Aligned file-tree and editor headers. */
body.cf-body :is(.cf-tree-head, .cf-head) {
    box-sizing: border-box;
    height: var(--cf-head-h);
    min-height: var(--cf-head-h);
    max-height: var(--cf-head-h);
    border-color: var(--cf-border);
}
body.cf-body .cf-tree-head {
    padding: 7px 12px;
    align-items: center !important;
}
body.cf-body .cf-tree-head small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
}
body.cf-body .cf-head { padding: 8px 14px; }

body.cf-body .cf-tree {
    background: var(--cf-surface);
    border-color: var(--cf-border);
    color: var(--cf-text);
}
body.cf-body .cf-toolbar {
    background: var(--cf-surface);
    border-color: var(--cf-border);
}
body.cf-body .cf-tbtn {
    background: var(--cf-raised);
    border-color: var(--cf-border);
    color: var(--cf-text);
}
body.cf-body .cf-tbtn:hover {
    background: var(--cf-hover);
    border-color: var(--cf-primary);
    color: var(--cf-primary);
}
body.cf-body .cf-node {
    color: var(--cf-text);
    border-color: transparent;
}
body.cf-body .cf-node:hover { background: var(--cf-hover); }
body.cf-body .cf-node.active {
    background: var(--cf-psoft);
    border-left-color: var(--cf-primary);
    color: var(--cf-primary);
}
body.cf-body .cf-actbtn { color: var(--cf-muted); }
body.cf-body .cf-actbtn:hover {
    background: color-mix(in srgb, #dc2626 12%, var(--cf-surface));
    color: #ef4444;
}
body.cf-body .cf-actbtn.rn:hover {
    background: var(--cf-psoft);
    color: var(--cf-primary);
}
body.cf-body .cf-empty-tree { color: var(--cf-muted); }
body.cf-body .cf-node .cf-badge {
    background: color-mix(in srgb, #f59e0b 15%, var(--cf-surface));
    color: #d97706;
}
body.cf-body .cf-tree.is-dragover {
    background: color-mix(in srgb, var(--cf-primary) 10%, var(--cf-surface));
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--cf-primary) 55%, transparent);
}
body.cf-body .cf-resizer::after { background: var(--cf-border); }

html[data-pp-theme="dark"] body.cf-body .cf-help-btn {
    background: var(--pp-accent-soft);
    border-color: color-mix(in srgb, var(--pp-accent) 52%, var(--cf-border));
    color: var(--pp-accent);
}
html[data-pp-theme="dark"] body.cf-body .cf-help-btn:hover {
    background: var(--pp-accent);
    border-color: var(--pp-accent);
    color: #fff;
}

/* Editor, preview and diagnostics. */
body.cf-body :is(.cf-main, .cf-editor-wrap, .cf-blank, .cf-preview) {
    background: var(--cf-code-bg);
    color: var(--cf-code-muted);
}
body.cf-body .cf-head {
    background: var(--cf-code-raised);
    border-color: var(--cf-code-border);
}
body.cf-body .cf-crumb { color: var(--cf-code-text); }
body.cf-body :is(.cf-crumb .cf-dim, .cf-status, .cf-blank, .cf-preview .cf-pmeta) {
    color: var(--cf-code-muted);
}
body.cf-body .cf-savebtn {
    background: color-mix(in srgb, var(--cf-code-accent) 12%, var(--cf-code-raised));
    border-color: color-mix(in srgb, var(--cf-code-accent) 50%, var(--cf-code-border));
    color: var(--cf-code-accent);
}
body.cf-body .cf-savebtn:hover {
    background: color-mix(in srgb, var(--cf-code-accent) 20%, var(--cf-code-raised));
    border-color: var(--cf-code-accent);
    color: var(--cf-code-accent);
}
body.cf-body .cf-checkbtn {
    background: color-mix(in srgb, #0d9488 10%, var(--cf-code-raised));
    border-color: color-mix(in srgb, #0d9488 55%, var(--cf-code-border));
    color: #0d9488;
}
html[data-pp-theme="dark"] body.cf-body .cf-checkbtn { color: #94e2d5; }
body.cf-body .cf-checkbtn:hover {
    background: color-mix(in srgb, #0d9488 18%, var(--cf-code-raised));
    border-color: #0d9488;
}
body.cf-body .cf-gutter {
    background: var(--cf-code-bg);
    border-color: var(--cf-code-border);
}
body.cf-body #cfGutter { color: var(--cf-code-subtle); }
body.cf-body #cfEditor {
    background: var(--cf-code-bg) !important;
    color: var(--cf-code-text) !important;
    caret-color: var(--cf-code-accent);
    color-scheme: inherit;
}
body.cf-body #cfEditor::placeholder { color: var(--cf-code-subtle) !important; }
body.cf-body #cfEditor::selection { background: var(--cf-code-selection); }
body.cf-body .cf-blank i { color: var(--cf-code-subtle); }
body.cf-body .cf-preview img {
    background: var(--cf-raised);
    box-shadow: 0 8px 30px var(--pp-shadow-color, rgba(15, 23, 42, .18));
}

body.cf-body .cf-problems {
    background: var(--cf-code-raised);
    border-color: var(--cf-code-border);
}
body.cf-body .cf-problems-head { border-color: var(--cf-code-border); }
body.cf-body .cf-problems-head :is(.cf-ptool, .cf-pclose) { color: var(--cf-code-subtle); }
body.cf-body .cf-problems-head .cf-pclose:hover { color: var(--cf-code-text); }
body.cf-body .cf-problem { color: var(--cf-code-text); }
body.cf-body .cf-problem:hover { background: var(--cf-code-bg); }
body.cf-body .cf-problem .cf-pmsg { color: var(--cf-code-muted); }

body.cf-body .cf-info {
    background: color-mix(in srgb, var(--cf-primary) 8%, var(--cf-code-raised));
    border-color: color-mix(in srgb, var(--cf-primary) 22%, var(--cf-code-border));
    color: color-mix(in srgb, var(--cf-primary) 68%, var(--cf-code-text));
}
body.cf-body .cf-info code {
    background: color-mix(in srgb, var(--cf-primary) 12%, var(--cf-code-raised));
    color: inherit;
}

/* Help and Guide. */
body.cf-body .cfh-modal {
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    color: var(--cf-text);
}
body.cf-body .cfh-head { border-color: var(--cf-border); }
body.cf-body .cfh-toc {
    background: var(--cf-bg);
    border-color: var(--cf-border);
}
body.cf-body .cfh-toc a { color: var(--cf-muted); }
body.cf-body :is(.cfh-toc a:hover, .cfh-toc a.active) {
    background: var(--cf-psoft);
    color: var(--cf-primary);
}
body.cf-body .cfh-content { color: var(--cf-text); }
body.cf-body .cfh-content h3 { color: var(--cf-text); }
body.cf-body .cfh-content h4 { color: color-mix(in srgb, var(--cf-primary) 70%, var(--cf-text)); }
body.cf-body .cfh-content :is(p, ul, ol, .cfh-lead) { color: var(--cf-muted); }
body.cf-body .cfh-content code {
    background: var(--cf-hover);
    color: color-mix(in srgb, var(--cf-primary) 76%, var(--cf-text));
}
body.cf-body .cfh-content pre {
    background: var(--cf-code-bg);
    border-color: var(--cf-code-border);
    color: var(--cf-code-text);
}
body.cf-body .cfh-content pre code { background: none; color: inherit; }
body.cf-body .cfh-table th {
    background: var(--cf-hover);
    border-color: var(--cf-border);
    color: var(--cf-muted);
}
body.cf-body .cfh-table td {
    border-color: var(--cf-border);
    color: var(--cf-text);
}
body.cf-body .cfh-table tr:hover td { background: var(--cf-hover); }
body.cf-body .cfh-foot { border-color: var(--cf-border); color: var(--cf-muted); }
html[data-pp-theme="dark"] body.cf-body .cfh-callout.tip { background:#102d26; color:#86efac; }
html[data-pp-theme="dark"] body.cf-body .cfh-callout.warn { background:#302617; color:#fde68a; }
html[data-pp-theme="dark"] body.cf-body .cfh-callout.info { background:#142845; color:#bfdbfe; }
html[data-pp-theme="dark"] body.cf-body .cfh-callout.sec { background:#351c26; color:#fecdd3; }

@media (max-width: 900px) {
    body.cf-body { --cf-head-h: 52px; }
    body.cf-body .cf-tree-head { padding-block: 6px; }
}
