/*
 * 1:1 recreation of the VisualBukkit desktop theme (Base.css + Dark.css).
 * Colors, fonts and block shapes mirror the JavaFX app exactly.
 */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Medium.ttf') format('truetype');
    font-weight: 500;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Bold.ttf') format('truetype');
    font-weight: 700;
}
@font-face {
    font-family: 'Noto Sans VB';
    src: url('../fonts/NotoSansCJK-Regular.otf') format('opentype');
}

:root {
    /* Dark.css palette */
    --background: rgb(32, 34, 37);
    --base: rgb(48, 51, 56);
    --control-inner: rgb(20, 20, 20);
    --accent: rgb(63, 81, 181);
    --menu-bar: rgb(35, 43, 50);
    --light-text: white;
    --border: black;

    /* block colors (Base.css) */
    --statement: rgb(0, 230, 154);
    --expression: rgb(255, 179, 71);
    --expression-nested: rgb(255, 202, 128);
    --param: #e6a6ae;        /* derive(pink, -15%) */
    --param-hover: pink;
    --container: lightblue;
    --container-nested: cornflowerblue;
    --plugin-component: rgb(180, 96, 235);
    --connector: yellow;
    --number-field: beige;
    --local-var: yellow;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    font-family: 'Noto Sans VB', -apple-system, "Segoe UI", sans-serif;
    background: var(--background);
    color: var(--light-text);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---------- Menu bar ---------- */
#menubar {
    display: flex;
    align-items: stretch;
    background: var(--menu-bar);
    border-bottom: 1px solid var(--border);
    user-select: none;
    height: 30px;
}
.menu {
    position: relative;
    padding: 0 12px;
    display: flex;
    align-items: center;
    cursor: default;
    font-size: 13px;
}
.menu:hover { background: var(--accent); }
.menu .menu-drop {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    background: var(--base);
    border: 1px solid var(--border);
    min-width: 200px;
    z-index: 100;
    padding: 1px;
    flex-direction: column;
}
.menu.open .menu-drop { display: flex; }
.menu-item { padding: 6px 12px; cursor: default; white-space: nowrap; }
.menu-item:hover { background: var(--accent); }
.menu-sep { height: 1px; background: gray; margin: 2px 0; }
.menu-spacer { flex: 1; }
.menu-title { display: flex; align-items: center; padding: 0 12px; font-weight: 700; color: #cfd6e6; }
.menu-title span { color: rgb(120, 150, 235); }

/* ---------- Split layout ---------- */
#split { flex: 1; display: flex; min-height: 0; }
#side {
    width: 26%;
    min-width: 300px;
    display: flex;
    background: var(--background);
}
/* vertical tab strip (Side.LEFT) */
.side-tabs {
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--background) 65%, black);
    border-right: 1px solid var(--border);
}
.side-tab {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding: 14px 6px;
    cursor: default;
    border-bottom: 1px solid var(--border);
    letter-spacing: .5px;
}
.side-tab.active { background: var(--background); }
.side-content { flex: 1; display: flex; min-width: 0; }
.side-pane { display: none; flex: 1; min-width: 0; }
.side-pane.active { display: flex; }

/* ---------- Block selector ---------- */
.block-selector {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 10px;
    gap: 10px;
    min-width: 0;
}
.block-selector .title { text-decoration: underline; font-weight: 700; }
.selector-controls { display: flex; flex-direction: column; gap: 8px; }
.search-row { display: flex; align-items: center; gap: 8px; }
.search-row input { flex: 1; }
.selector-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.selector-checks label { display: inline-flex; align-items: center; gap: 5px; color: var(--light-text); }
.hr { height: 1px; background: gray; border: 0; margin: 2px 0; }
.selector-count { color: #9aa4b6; font-size: 11px; }
.block-list {
    flex: 1;
    overflow-y: auto;
    background: var(--control-inner);
    border: 1px solid var(--border);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* palette source blocks — same colors as the real thing */
.source {
    font-family: 'JetBrains Mono', monospace;
    color: black;
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 6px 8px;
    cursor: grab;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 0 auto;             /* keep full height; the list scrolls instead of squishing */
    /* the browser skips painting rows that are off-screen, so the full list stays fast */
    content-visibility: auto;
    contain-intrinsic-size: auto 30px;
}
.source.statement-source { background: var(--statement); }
.source.expression-source { background: var(--expression); border-radius: 10px; }
.source.plugin-component-source { background: var(--plugin-component); }
.source .since { float: right; font-size: 10px; opacity: .65; }
.source.paper-only { box-shadow: inset 3px 0 0 var(--plugin-component); }
.pcat > summary { cursor: pointer; color: #9aa4b6; font-weight: 700; font-size: 11px; padding: 2px; text-transform: uppercase; }
.pcat[open] > summary { color: #c7cfdd; }

/* ---------- Inputs / buttons (desktop styling) ---------- */
input, select, textarea, button {
    font-family: 'Noto Sans VB', sans-serif;
    font-size: 12px;
}
input[type=text], input[type=number], textarea, select {
    background: var(--control-inner);
    color: var(--light-text);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 3px 5px;
}
input:focus, select:focus, textarea:focus { outline: none; }
button {
    background: var(--base);
    color: var(--light-text);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 5px 9px;
    cursor: default;
}
button:hover { opacity: .85; }
button.round { border-radius: 15px; padding: 8px 12px; }

/* ---------- Plugin Components list (side) ---------- */
.component-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; flex: 0 0 auto; }
.comp-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 7px; border: 1px solid var(--border); border-radius: 5px;
    background: var(--control-inner); cursor: default;
    flex: 0 0 auto;              /* don't let many rows squish each other */
}
.comp-row:hover { border-color: var(--accent); }
.comp-row.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, var(--control-inner)); }
.comp-badge { font-size: 10px; font-weight: 700; color: black; border-radius: 4px; padding: 1px 5px; }
.comp-badge.command { background: var(--statement); }
.comp-badge.event { background: var(--plugin-component); color: white; }
.comp-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comp-del { opacity: .55; cursor: default; }
.comp-del:hover { opacity: 1; }

/* ---------- Plugin settings pane ---------- */
.plugin-settings {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-left: 1px solid var(--border);
}
.plugin-settings .title { text-decoration: underline; font-weight: 700; }
.settings-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; }
.settings-grid label { color: var(--light-text); }
.settings-grid input, .settings-grid select, .settings-grid textarea { width: 100%; }
.settings-grid textarea { min-height: 70px; resize: vertical; }
.settings-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.settings-buttons button { display: flex; align-items: center; gap: 6px; justify-content: center; }

/* ---------- Canvas (plugin component pane) ---------- */
#canvas-area { flex: 1; display: flex; flex-direction: column; border-left: 1px solid var(--border); min-width: 0; }
.component-tabs {
    display: flex;
    background: color-mix(in srgb, var(--background) 95%, black);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    min-height: 30px;
}
.ctab {
    padding: 6px 14px;
    border-right: 1px solid var(--border);
    background: color-mix(in srgb, var(--background) 65%, black);
    cursor: default;
    white-space: nowrap;
    display: flex; align-items: center; gap: 8px;
}
.ctab.active { background: var(--background); }
.ctab .close { opacity: .6; }
.ctab .close:hover { opacity: 1; }
.ctab.add { font-weight: 700; }
#component-pane {
    flex: 1;
    overflow: auto;
    padding: 15px;
    border-top: 0;
}
.canvas-empty { color: #8a93a5; text-align: center; margin-top: 90px; font-size: 14px; }

/* ---------- Blocks (Base.css shapes) ---------- */
.block {
    font-family: 'JetBrains Mono', monospace;
    border: 1px solid var(--border);
    color: black;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.block .label, .block .kw, .block .title { color: black; }
.block-header { font-family: 'JetBrains Mono', monospace; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.block-header .hbtn { background: transparent; border: 0; padding: 0 3px; color: black; font-weight: 700; cursor: default; }
.block-header .hbtn:hover { opacity: .7; }
.block-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.plugin-component-block {
    background: var(--plugin-component);
    border-radius: 10px 10px 0 0;
    max-width: 1000px;
}
.statement-block { background: var(--statement); }
.container-block { background: var(--container); padding: 8px 8px 25px 8px; }
.container-block .container-block, .container-block .nested { background: var(--container-nested); }

/* statement stack + connectors */
.stack { display: flex; flex-direction: column; }
.statement-connector {
    height: 10px;
    margin: 0 0 0 4px;
    border-left: 2px dashed rgba(0,0,0,.35);
}
.stack-drop {
    min-height: 22px;
    border: 1px dashed rgba(0,0,0,.4);
    border-radius: 3px;
    margin: 3px 0;
    padding: 2px 6px;
    color: rgba(0,0,0,.55);
    font-size: 11px;
    background: rgba(255,255,255,.12);
}

/* expressions */
.expression-block {
    background: var(--expression);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: black;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    font-family: 'JetBrains Mono', monospace;
}
.expression-block.nested { background: var(--expression-nested); }
.expression-block .title { font-weight: 700; }

/* expression parameter slots (pink) */
.expression-parameter {
    background: var(--param);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 3px 7px;
    color: black;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 22px;
    min-width: 34px;
    cursor: default;
    font-family: 'JetBrains Mono', monospace;
}
.expression-parameter:hover { background: var(--param-hover); }
.expression-parameter.empty::before { content: attr(data-label); color: rgba(0,0,0,.55); font-style: italic; }
.expression-parameter.dragover { background: color-mix(in srgb, yellow 60%, white); }
.expression-parameter input, .expression-parameter select {
    background: lightgray; color: black; border: 1px solid var(--border);
    padding: 1px 3px; font-family: 'JetBrains Mono', monospace; max-width: 130px;
}
.expression-parameter input.number-field { background: var(--number-field); }
.block .text-field, .block input[type=text] { background: lightgray; color: black; }

/* drop feedback */
.stack-drop.dragover, .dropzone.dragover { border-color: var(--accent); background: rgba(63,81,181,.18); color: var(--light-text); }
.block.invalid { background: red !important; }

/* ---------- ExpressionSelector popup (click a pink slot) ---------- */
.expression-selector-popup {
    position: fixed;
    width: 330px;
    max-height: 320px;
    background: var(--base);
    border: 1px solid var(--border);
    box-shadow: 0 12px 40px rgba(0,0,0,.6);
    z-index: 300;
    display: flex;
    flex-direction: column;
}
.es-search { display: flex; align-items: center; gap: 8px; padding: 8px; border-bottom: 1px solid var(--border); }
.es-search input { flex: 1; }
.es-list { overflow-y: auto; padding: 4px; }
.es-option {
    padding: 5px 8px; cursor: default; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.es-option.prim { color: black; background: var(--expression); margin: 2px 0; border-radius: 10px; }
.es-option.expr:hover { background: var(--accent); }
.es-option.prim:hover { background: var(--param-hover); }
.es-sep { height: 1px; background: gray; margin: 4px 2px; }
.es-hint { padding: 8px; color: #8a93a5; font-size: 11px; }

/* workspace accepts dragged plugin components */
#component-pane.dragover, #component-tabs.dragover { outline: 2px dashed var(--accent); outline-offset: -4px; }

/* ---------- Toast ---------- */
#toast {
    position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
    background: var(--base); border: 1px solid var(--accent);
    padding: 10px 16px; border-radius: 6px; z-index: 200; max-width: 80%;
    box-shadow: 0 10px 34px rgba(0,0,0,.5);
}
#toast.error { border-color: red; }
.hidden { display: none !important; }