.aurora-ide {
    display: grid;
    grid-template-columns: 250px 6px 1fr 6px 300px;
    grid-template-rows: 1fr 6px 200px;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.toolbox {
    grid-column: 1;
    grid-row: 1 / span 3;
    background: #f6f6f6;
    overflow: auto;
}

.splitter-v {
    background: #ccc;
    cursor: col-resize;
}

.center {
    grid-column: 3;
    grid-row: 1 / span 3;
    display: grid;
    grid-template-rows: 1fr 6px 200px;
}

.diagram {
    background: #ffffff;
    overflow: auto;
}

.splitter-h {
    background: #ccc;
    cursor: row-resize;
}

.output {
    background: #1e1e1e;
    color: #ddd;
    font-family: monospace;
    overflow: auto;
}

.properties {
    grid-column: 5;
    grid-row: 1 / span 3;
    background: #fafafa;
    overflow: auto;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

.no-selection {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 13px;
    text-align: center;
    padding: 48px 24px;
}

/* For making property grid and toolbox look even smaller */
/* ==============================
   Aurora Compact Theme Tweaks
   ============================== */

/* Reduce overall padding & row height for MudTable (Properties Grid) */
.aurora-compact-table .mud-table-root {
    --mud-table-row-height: 26px;
    --mud-table-cell-padding: 2px 8px;
    font-size: 0.8rem;
}

/* Compact MudTextField / Numeric / Select / Switch */
.aurora-compact-input .mud-input-slot,
.aurora-compact-input .mud-input {
    min-height: 26px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 0.8rem;
}

/* Reduce NavMenu spacing (Toolbox) */
.aurora-compact-nav .mud-nav-item {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    min-height: 26px !important;
    font-size: 0.8rem;
}

.aurora-compact-nav .mud-nav-group {
    margin-top: 2px;
    margin-bottom: 2px;
}

/* Make section headers a bit smaller */
.aurora-compact-nav .mud-nav-group-text {
    font-size: 0.8rem;
}
/* end smaller props grid and tbx */

/*DIAGRAM BUILDER*/
/* Diagram node visuals */
.aurora-diagram .aurora-node {
    position: relative;
    border: 1px solid var(--mud-palette-lines-default, #ccc);
    border-radius: 6px;
    margin: 4px 8px;
    background: var(--mud-palette-surface, #fff);
    display: flex;
    align-items: center;
    transition: border-color 120ms ease, opacity 120ms ease, background 120ms ease;
}

    .aurora-diagram .aurora-node.node-normal {
        border-color: #888;
    }

    .aurora-diagram .aurora-node.node-error {
        border-color: #d32f2f;
    }
    /* red */
    .aurora-diagram .aurora-node.node-moving {
        border-color: #2e7d32;
    }
    /* green */

    .aurora-diagram .aurora-node.node-disabled {
        opacity: 0.5;
    }

.aurora-diagram .node-collapse {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    width: 20px;
    text-align: center;
    color: var(--mud-palette-text-secondary, #666);
}

.aurora-diagram .node-text {
    padding-left: 6px;
    user-select: none;
    cursor: pointer;
}

.aurora-diagram .node-actions {
    position: absolute;
    right: 6px;
    opacity: 0;
    transition: opacity 120ms ease;
    display: inline-flex;
    gap: 2px;
}

.aurora-diagram .aurora-node:hover .node-actions {
    opacity: 1;
}
/*END DIAGRAM BUILDER*/

/* =========================================================
   Aurora IDE - Diagram Builder (V2)
   ========================================================= */
/* Node row: single line, aligns items */
.aurora-diagram .aurora-node-row {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* left spacing before collapser */
.aurora-diagram .node-indent {
    display: inline-block;
    width: 0;
}

/* collapser button */
.aurora-diagram .node-collapse {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    width: 20px;
    text-align: center;
    color: var(--mud-palette-text-secondary, #666);
    margin-right: 4px;
}

/* keep alignment when no children */
.aurora-diagram .node-collapse-placeholder {
    display: inline-block;
    width: 20px;
    margin-right: 4px;
}

/* wrapper for rectangle + actions */
.aurora-diagram .node-wrap {
    position: relative;
    display: inline-block;
}

/* the rectangle */
.aurora-diagram .node-box {
    border: 1px solid #888; /* default normal */
    border-radius: 0; /* square corners */
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 120ms ease, border-width 120ms ease, opacity 120ms ease, background 120ms ease;
}

    /* state colors */
    .aurora-diagram .node-box.node-error {
        border-color: #d32f2f;
    }
    /* red */
    .aurora-diagram .node-box.node-moving {
        border-color: #2e7d32;
    }
    /* green */
    .aurora-diagram .node-box.node-normal {
        border-color: #888;
    }

    /* selected state */
    .aurora-diagram .node-box.node-selected {
        border-color: #64b5f6;
    }

/* disabled look */
.aurora-diagram .node-disabled {
    opacity: .5;
}

/* hover sugar: thicker + blue */
.aurora-diagram .node-box:hover {
    border-width: 2px;
    border-color: #1976d2;
}

/* actions: only when hovering the rectangle */
.aurora-diagram .node-actions {
    position: absolute;
    top: 50%;
    left: 100%; /* start immediately after rectangle edge */
    transform: translateY(-50%);
    margin-left: 6px;
    opacity: 0;
    transition: opacity 120ms ease;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

/* reveal actions when hovering the rectangle */
.aurora-diagram .node-wrap:hover .node-actions {
    opacity: 1;
}
.aurora-diagram .aurora-node-row {
    display: flex;
    align-items: center;
    white-space: nowrap;
    margin-bottom: 4px; /* baseline spacing, overridable via VerticalSpacing */
}

.aurora-diagram-scroll {
    overflow: auto;
    flex: 1;
    padding: 4px 0 4px 0; /* <— add this */
}

/* MUDBLAZOR BUTTONS TEXT TO UPPERCASE CORRECTION */
.mud-button-root {
    text-transform: none !important;
}

/* SPLITTER */
/* Gutter styles */
.gutter {
    background-color: #ccc;
    background-repeat: no-repeat;
    background-position: 50%;
}

.gutter.gutter-vertical {
    background-color: #eee;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
    background-repeat: no-repeat;
    background-position: center;
    cursor: row-resize;
}

.gutter.gutter-horizontal {
    background-color: #eee;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
    background-repeat: no-repeat;
    background-position: center;
    cursor: col-resize;
}
.arrow-text {
    font-family: "Segoe UI Symbol", "Noto Sans Symbols", sans-serif;
}