/* ── Design Tokens (must be first) ─────────────────────────────────────── */
/* Note: in SvelteKit, tokens.css is served from src/styles/tokens.css      */
/* and referenced from individual components via their <style> blocks.       */
/* The font import below covers the global entry point.                      */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* Custom icon / display font for LCD simulation */
@font-face {
    font-family: DSEG7Classic-Bold;
    src: url(/fonts/DSEG7Classic-Bold.woff);
}

@font-face {
    font-family: 'DSEG7 Classic';
    src: url(/fonts/DSEG7Classic-Regular.woff);
}

/* ── Design Tokens ──────────────────────────────────────────────────────── */
/* tokens.css is imported directly inside SvelteKit components */

/* ── Base Reset ─────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Nunito', 'Helvetica Neue', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-1, rgba(255, 255, 255, 0.92));
    background-color: var(--bg-page, #06050f);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="light"] body,
[data-theme="light"] {
    color: var(--text-1);
    background-color: var(--bg-page);
}

#sapper {
    overflow: hidden;
}

/* ── SVG default cursor ─────────────────────────────────────────────────── */
svg {
    cursor: move;
}

.wire-connection {
    cursor: pointer !important;
}

/* ── Headings ───────────────────────────────────────────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 0.5em 0;
    font-weight: 700;
    line-height: 1.2;
    font-family: 'Nunito', sans-serif;
}

h1 {
    font-size: 2em;
}

/* ── Links ──────────────────────────────────────────────────────────────── */
a {
    color: inherit;
    text-decoration: none;
}

/* ── Code ───────────────────────────────────────────────────────────────── */
code {
    font-family: 'JetBrains Mono', menlo, inconsolata, monospace;
    font-size: calc(1em - 2px);
    color: #c4b5fd;
    background-color: rgba(124, 58, 237, 0.12);
    padding: 0.2em 0.4em;
    border-radius: 4px;
}

/* ── Blockly widget fixes ───────────────────────────────────────────────── */
/** Prevents scroll bar on block click popup **/
.blocklyWidgetDiv .blocklyMenu {
    overflow-y: hidden;
}

/* ── Blockly dropdowns (dark mode) ──────────────────────────────────────── */
.blocklyWidgetDiv .blocklyMenu,
.blocklyDropDownDiv .blocklyMenu {
    background: #1a1535 !important;
    border: 1px solid rgba(124, 58, 237, 0.30) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55) !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 600 !important;
    padding: 4px !important;
}

.blocklyWidgetDiv .blocklyMenuItem,
.blocklyDropDownDiv .blocklyMenuItem {
    color: rgba(255, 255, 255, 0.82) !important;
    border-radius: 7px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
}

.blocklyWidgetDiv .blocklyMenuItem:hover,
.blocklyDropDownDiv .blocklyMenuItem:hover {
    background: rgba(124, 58, 237, 0.22) !important;
    color: #fff !important;
}

.blocklyWidgetDiv .blocklyMenuItemSelected,
.blocklyDropDownDiv .blocklyMenuItemSelected {
    background: rgba(124, 58, 237, 0.35) !important;
    color: #fff !important;
}

/* ── Blockly dropdowns & Pin Numbers (Bold Red & Scrollable) ────────── */
.blocklyDropDownDiv {
    background-color: #ffffff !important;
    border: 2.5px solid #dc2626 !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22) !important;
    padding: 4px !important;
    z-index: 99999 !important;
    overflow: visible !important;
}

.blocklyDropDownContent,
.blocklyDropDownDiv .blocklyDropDownContent {
    max-height: 220px !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    scrollbar-width: auto !important;
    scrollbar-color: #dc2626 #fee2e2 !important;
    padding-right: 4px !important;
}

.blocklyDropDownContent::-webkit-scrollbar,
.blocklyDropDownDiv .blocklyDropDownContent::-webkit-scrollbar {
    width: 10px !important;
    display: block !important;
}

.blocklyDropDownContent::-webkit-scrollbar-track,
.blocklyDropDownDiv .blocklyDropDownContent::-webkit-scrollbar-track {
    background: #fee2e2 !important;
    border-radius: 6px !important;
}

.blocklyDropDownContent::-webkit-scrollbar-thumb,
.blocklyDropDownDiv .blocklyDropDownContent::-webkit-scrollbar-thumb {
    background: #dc2626 !important;
    border-radius: 6px !important;
}

.blocklyDropDownDiv .blocklyMenu,
.blocklyDropDownDiv .goog-menu {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
}

/* ── Force all Pin numbers & items inside DropDown to BOLD RED ── */
.blocklyDropDownDiv .goog-menuitem,
.blocklyDropDownDiv .blocklyMenuItem,
.blocklyDropDownDiv .goog-menuitem *,
.blocklyDropDownDiv .blocklyMenuItem *,
.blocklyDropDownDiv .goog-menuitem-content,
.blocklyDropDownDiv .blocklyMenuItemContent,
.zelos-renderer.blocklyDropDownDiv .goog-menuitem-content,
.zelos-renderer.blocklyDropDownDiv .blocklyMenuItemContent {
    color: #dc2626 !important;
    fill: #dc2626 !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    font-family: 'Nunito', 'Segoe UI', sans-serif !important;
}

.blocklyDropDownDiv .goog-menuitem,
.blocklyDropDownDiv .blocklyMenuItem {
    padding: 7px 14px !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    margin: 1px 0 !important;
    display: flex !important;
    align-items: center !important;
    min-width: 90px !important;
    background: transparent !important;
}

.blocklyDropDownDiv .goog-menuitem:hover,
.blocklyDropDownDiv .blocklyMenuItem:hover,
.blocklyDropDownDiv .goog-menuitem-highlight,
.blocklyDropDownDiv .blocklyMenuItemHighlight {
    background-color: #fee2e2 !important;
}

.blocklyDropDownDiv .goog-menuitem:hover *,
.blocklyDropDownDiv .blocklyMenuItem:hover *,
.blocklyDropDownDiv .goog-menuitem-highlight *,
.blocklyDropDownDiv .blocklyMenuItemHighlight * {
    color: #991b1b !important;
}

.blocklyDropDownDiv .goog-option-selected,
.blocklyDropDownDiv .blocklyMenuItemSelected {
    background-color: #fecaca !important;
    border: 1.5px solid #dc2626 !important;
}

.blocklyDropDownDiv .goog-option-selected *,
.blocklyDropDownDiv .blocklyMenuItemSelected * {
    color: #7f1d1d !important;
    font-weight: 900 !important;
}

.blocklyDropDownDiv .goog-menuitem-checkbox {
    display: none !important;
}

/* ── Number/Text Inputs on block (e.g. 0.2 in wait block) ────────── */
.blocklyEditableText:not(.blocklyFieldDropdown):not(.blocklyFieldColourGroup):has(text) > rect:not(.blocklyFieldColourRect) {
    rx: 8px !important;
    ry: 8px !important;
    fill: #ffffff !important;
    fill-opacity: 1 !important;
    stroke: none !important;
    stroke-width: 0 !important;
}

.blocklyEditableText:not(.blocklyFieldDropdown):not(.blocklyFieldColourGroup):has(text) text,
.blocklyEditableText:not(.blocklyFieldDropdown):not(.blocklyFieldColourGroup):has(text) tspan {
    fill: #1e293b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    font-family: 'Nunito', sans-serif !important;
}

/* ── Dropdown Pills on block surface (e.g. led# 8, on/off) ───────── */
.blocklyFieldDropdown > rect {
    rx: 10px !important;
    ry: 10px !important;
    fill: rgba(0, 0, 0, 0.18) !important;
    fill-opacity: 1 !important;
    stroke: rgba(0, 0, 0, 0.10) !important;
    stroke-width: 1px !important;
}

.blocklyDropdownText,
.blocklyDropdownText text,
.blocklyDropdownText tspan,
.blocklyFieldDropdown text,
.blocklyFieldDropdown tspan {
    fill: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    font-family: 'Nunito', sans-serif !important;
}

/* Fallback text arrow */
.blocklyDropdownText tspan:last-child {
    fill: #fbbf24 !important;
    font-weight: 900 !important;
}

/* SVG arrow image */
.blocklyFieldDropdown image {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)) !important;
}

/* ── Color Fields (e.g. LED color square) ────────────────────────── */
.blocklyFieldColourRect,
.blocklyFieldColourGroup rect,
.blocklyFieldColour rect,
.blocklyColourRect,
rect.blocklyColourRect {
    rx: 6px !important;
    ry: 6px !important;
    stroke: rgba(255, 255, 255, 0.6) !important;
    stroke-width: 1.5px !important;
}

/* ── Active HTML Input field (when typing) ───────────────────────── */
.blocklyHtmlInput,
input.blocklyHtmlInput {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    border-radius: 8px !important;
    text-align: center !important;
    padding: 0 !important;
}

/* ── Global custom scrollbars (theme-aware) ──────────────────────────────── */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track, rgba(255, 255, 255, 0.03));
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb, rgba(124, 58, 237, 0.35));
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover, rgba(124, 58, 237, 0.60));
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* ── Buttons global reset ────────────────────────────────────────────────── */
button {
    cursor: pointer;
}

button:active {
    transform: scale(0.96);
}