/* ──────────────────────────────────────────────────────────────── */
/*  theme.css – Central place for all colours, font sizes & dark‑mode
/*  All colours are defined as CSS custom properties on :root.
 *  You can tweak a single line and the whole app updates instantly.
 *  The file also contains a `prefers-color-scheme: dark` media query
 *  so that the theme automatically flips to a dark palette on
 *  supported devices.
 *
 *  ──────────────────────────────────────────────────────────────── */

:root {
    /* ---------- Font ---------- */
    --font-family-base: system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-size-base: 1rem;
    /* 16px default */
    --font-size-sm: .875rem;
    /* 14px */
    --font-size-lg: 1.125rem;
    /* 18px */
    --font-size-xl: 1.25rem;
    /* 20px */
    --line-height-base: 1.5;

    /* ---------- Border Radius ---------- */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 8px;

    /* ---------- Colours (light) ---------- */
    /* Base palette – feel free to replace with your brand colours. */
    --color-primary: #004e99;
    /* softer blue (vs #0066ff) */
    --color-secondary: #b36700;
    /* muted orange (vs #ff9500) */
    --color-success: #00c853;
    --color-danger: #d32f2f;
    --color-warning: #ff6f00;
    --color-accent: #00c853;
    --color-bus: #d90368;

    /* Text / background */
    --color-text: #212121;
    /* Dark grey – default text */
    --color-muted: #757575;
    /* Light grey – captions, hints */
    --color-background: #ffffff;
    /* Page background */
    --color-card-bg: #fafafa;
    /* Card / panel bg */
    --color-panel-bg: #f5f5f5;
    --color-canvas-bg: #f0f0f0;
    /* Canvas background - matches the explicit light theme */
    --color-border: #e0e0e0;
    /* Light borders */
    --color-hover: #e0e0e0;
    --color-active-bg: #e3f2fd;

    /* Semantic border / background overrides */
    --color-border-button: var(--color-border);
    --color-bg-button: var(--color-primary);
    --color-text-button: #ffffff;

    --color-border-card: var(--color-border);
    --color-bg-card: var(--color-card-bg);
    --color-text-card: var(--color-text);

    --color-border-panel: var(--color-border);
    --color-bg-panel: var(--color-panel-bg);
    --color-text-panel: var(--color-text);

    --color-border-canvas: var(--color-border);
    --color-bg-canvas: var(--color-canvas-bg);
    --color-text-canvas: var(--color-text);

    /* Utility variables (derived) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, .1);
    --shadow-panel: 0 2px 8px rgba(0, 0, 0, .15);
    --shadow-dropdown: 0 4px 12px rgba(0, 0, 0, .15);
    --shadow-dialog: 0 8px 32px rgba(0, 0, 0, .2);
    --color-primary-foreground: #ffffff;
    --color-dialog-overlay: rgba(0, 0, 0, 0.4);
    --color-shortcuts-bg: rgba(0, 0, 0, 0.7);
    --color-shortcuts-text: #ffffff;
    --color-shortcuts-kbd-bg: rgba(255, 255, 255, 0.2);
    --gradient-panel-overlay: linear-gradient(135deg, var(--color-panel-overlay) 0%, var(--color-panel-overlay-faint) 100%);

    /* Wire colors */
    --color-wire: var(--color-primary);
    --color-wire-active: var(--color-warning);
    --color-wire-dangling: var(--color-danger);

    /* Panel overlay (for floating panels) */
    --color-panel-overlay: rgba(255, 255, 255, 0.95);
    --color-panel-overlay-faint: rgba(255, 255, 255, 0.9);
}

/* ──────────────────────────────────────────────────────────────── */
/*  Dark palette – the single source of truth for every dark colour.
 *  Both the explicit "dark" theme and the OS-driven "system" theme
 *  reference these values, so they can never drift apart.
 */
:root {
    --dark-text: #e0e0e0;
    --dark-muted: #bdbdbd;
    --dark-background: #121212;
    --dark-card-bg: #1e1e1e;
    --dark-panel-bg: #1e1e1e;
    --dark-canvas-bg: #1e1e1e;
    --dark-border: #424242;
    --dark-hover: #2a2a2a;
    --dark-active-bg: #1a3a5c;
    --dark-primary: #90caf9;
    --dark-secondary: #ffb74d;
    --dark-accent: #81c784;
    --dark-success: #81c784;
    --dark-danger: #e57373;
    --dark-warning: #ffca28;
    --dark-bus: #c04abc;
    --dark-shadow-panel: 0 2px 8px rgba(0, 0, 0, .4);
    --dark-shadow-dropdown: 0 4px 12px rgba(0, 0, 0, .4);
    --dark-shadow-dialog: 0 8px 32px rgba(0, 0, 0, .4);
    --dark-primary-foreground: #1e1e1e;
    --dark-dialog-overlay: rgba(0, 0, 0, 0.6);
    --dark-shortcuts-bg: rgba(0, 0, 0, 0.8);
    --dark-shortcuts-text: #e0e0e0;
    --dark-shortcuts-kbd-bg: rgba(255, 255, 255, 0.15);
    --dark-panel-overlay: rgba(30, 30, 30, 0.95);
    --dark-panel-overlay-faint: rgba(30, 30, 30, 0.9);
}

/* ──────────────────────────────────────────────────────────────── */
/*  Theme application
 *  - Light is the default, defined on :root above (no separate block
 *    needed, so [data-theme="light"] simply falls back to it).
 *  - Explicit "dark" always applies the dark palette.
 *  - "system" applies the dark palette only when the OS prefers dark;
 *    otherwise it inherits the light defaults.
 */
[data-theme="dark"] {
    --color-text: var(--dark-text);
    --color-muted: var(--dark-muted);
    --color-background: var(--dark-background);
    --color-card-bg: var(--dark-card-bg);
    --color-panel-bg: var(--dark-panel-bg);
    --color-canvas-bg: var(--dark-canvas-bg);
    --color-border: var(--dark-border);
    --color-hover: var(--dark-hover);
    --color-active-bg: var(--dark-active-bg);
    --color-primary: var(--dark-primary);
    --color-secondary: var(--dark-secondary);
    --color-accent: var(--dark-accent);
    --color-success: var(--dark-success);
    --color-danger: var(--dark-danger);
    --color-warning: var(--dark-warning);
    --color-bus: var(--dark-bus);
    --shadow-panel: var(--dark-shadow-panel);
    --shadow-dropdown: var(--dark-shadow-dropdown);
    --shadow-dialog: var(--dark-shadow-dialog);
    --color-primary-foreground: var(--dark-primary-foreground);
    --color-dialog-overlay: var(--dark-dialog-overlay);
    --color-shortcuts-bg: var(--dark-shortcuts-bg);
    --color-shortcuts-text: var(--dark-shortcuts-text);
    --color-shortcuts-kbd-bg: var(--dark-shortcuts-kbd-bg);
    --color-panel-overlay: var(--dark-panel-overlay);
    --color-panel-overlay-faint: var(--dark-panel-overlay-faint);
}

@media (prefers-color-scheme: dark) {
    /* Covers "system" and the no-preference case; explicit "light"
       is excluded so it always stays light. */
    :root:not([data-theme="light"]) {
        --color-text: var(--dark-text);
        --color-muted: var(--dark-muted);
        --color-background: var(--dark-background);
        --color-card-bg: var(--dark-card-bg);
        --color-panel-bg: var(--dark-panel-bg);
        --color-canvas-bg: var(--dark-canvas-bg);
        --color-border: var(--dark-border);
        --color-hover: var(--dark-hover);
        --color-active-bg: var(--dark-active-bg);
        --color-primary: var(--dark-primary);
        --color-secondary: var(--dark-secondary);
        --color-accent: var(--dark-accent);
        --color-success: var(--dark-success);
        --color-danger: var(--dark-danger);
        --color-warning: var(--dark-warning);
        --color-bus: var(--dark-bus);
        --shadow-panel: var(--dark-shadow-panel);
        --shadow-dropdown: var(--dark-shadow-dropdown);
        --shadow-dialog: var(--dark-shadow-dialog);
        --color-primary-foreground: var(--dark-primary-foreground);
        --color-dialog-overlay: var(--dark-dialog-overlay);
        --color-shortcuts-bg: var(--dark-shortcuts-bg);
        --color-shortcuts-text: var(--dark-shortcuts-text);
        --color-shortcuts-kbd-bg: var(--dark-shortcuts-kbd-bg);
        --color-panel-overlay: var(--dark-panel-overlay);
        --color-panel-overlay-faint: var(--dark-panel-overlay-faint);
    }
}

/* ──────────────────────────────────────────────────────────────── */
/*  Utility – reset the box‑sizing to make the variables easier to
 *  use with CSS frameworks or your own styles.
 */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ──────────────────────────────────────────────────────────────── */
/*  HTML/Body – fill the screen, remove default margins/padding
 */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--color-background);
    color: var(--color-text);
}

/* ──────────────────────────────────────────────────────────────── */
/*  Global element & component styles
 */
kbd {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    color: var(--color-text);
}

button:disabled {
    cursor: not-allowed;
}

/* Toolbar-style button (small icon button) */
.tool-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border);
    background: var(--color-card-bg);
    color: var(--color-text);
    cursor: pointer;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}
.tool-btn:hover:not(:disabled) {
    background: var(--color-hover);
}
.tool-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.tool-btn.active {
    border-color: var(--color-primary);
    background: var(--color-active-bg);
}

/* Header-style small icon button */
.header-btn-sm {
    background: none;
    border: none;
    color: var(--color-muted);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0.1rem 0.2rem;
    border-radius: var(--radius-sm);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.header-btn-sm:hover {
    background: var(--color-hover);
    color: var(--color-text);
}

/* Base dropdown menu (context menu & toolbar menu) */
.menu-dropdown-base {
    background: var(--color-panel-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown);
    padding: 0.25rem 0;
    user-select: none;
}
.menu-item-base {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.375rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--color-text);
    font-size: 0.8rem;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}
.menu-item-base:hover {
    background: var(--color-hover);
}
.menu-item-base.danger {
    color: var(--color-danger);
}
.menu-item-base:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Menu label (uppercase muted heading inside dropdowns) */
.menu-label {
    padding: 0.375rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
}

/* Menu separator (horizontal rule in dropdowns) */
.menu-separator {
    height: 1px;
    background: var(--color-border);
    margin: 0.25rem 0.5rem;
    border: none;
    padding: 0;
}

/* Submenu styles */
.submenu {
    position: relative;
}
.submenu summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0.75rem;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--color-text);
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}
.submenu summary:hover {
    background: var(--color-hover);
}
.submenu .submenu-chevron {
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
    color: var(--color-muted);
    transition: transform 0.15s;
}
.submenu[open] .submenu-chevron {
    transform: rotate(90deg);
}
.submenu-items {
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 120px;
    background: var(--color-panel-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-dropdown);
    padding: 0.25rem 0;
    margin-left: 2px;
    z-index: 1001;
}

/* Vertical separator between toolbar groups */
.separator-vertical {
    width: 1px;
    background: var(--color-border);
    flex-shrink: 0;
}

/* Primary / secondary button pair for dialogs */
.btn {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s;
}

.btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.btn-secondary {
    background: var(--color-card-bg);
    color: var(--color-text);
}
.btn-secondary:hover:not(:disabled) {
    background: var(--color-hover);
}
.btn-tutorial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-card-bg);
    color: var(--color-text);
    font-size: 0.85rem;
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.2s, border-color 0.2s;
}
.btn-tutorial:hover {
    background: var(--color-hover);
    border-color: var(--color-primary);
}
.btn-primary {
    background: var(--color-primary);
    color: var(--color-primary-foreground);
    border-color: var(--color-primary);
}

.btn-primary:disabled {
    cursor: not-allowed;
}

.btn-primary:hover:not(:disabled) {
    opacity: 0.9;
}

.btn-danger {
    background: var(--color-danger);
}

.btn-danger:hover:not(:disabled) {
    opacity: 0.9;
}

/* --- Dialog form fields (shared across dialogs) --- */
.section {
    margin-bottom: 1rem;
}

.section-title {
    margin: 0 0 0.5rem 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
}

.fields {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-text);
}

.field-label {
    min-width: 90px;
    flex-shrink: 0;
}

.field input[type="number"],
.field input[type="text"],
.field select,
.field textarea {
    flex: 1;
    min-width: 10px;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-card-bg);
    color: var(--color-text);
    font-size: 0.85rem;
}