/* ==========================================================================
   Aussom Playground – full-screen layout
   ========================================================================== */

/* Ensure html and body fill the viewport with no scroll. */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Top-level flex column that fills the viewport. */
#app-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Navbar stays at a fixed height and never shrinks. */
#main-navbar {
    flex-shrink: 0;
    border-bottom: 1px solid var(--bs-border-color);
}

/* Horizontal flex row that fills all remaining vertical space. */
#playground-main {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

/* ==========================================================================
   Editor panel (left column)
   ========================================================================== */

#editor-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border-right: 1px solid var(--bs-border-color);
}

/* Tab navigation bar – fixed height, never grows. */
#editor-tab-nav {
    flex-shrink: 0;
    border-bottom: 1px solid var(--bs-border-color);
}

/* Remove border-radius from tab buttons so they sit flush. */
#editor-tab-nav .nav-link {
    border-radius: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--bs-body-color);
}

#editor-tab-nav .nav-link:hover {
    background-color: var(--bs-secondary-bg);
}

#editor-tab-nav .nav-link.active {
    color: var(--bs-primary);
    border-bottom: 2px solid var(--bs-primary);
}

/* Generic tab pane: flex column that fills available space. */
.tab-pane-area {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Monaco editor fills the pane completely. */
#monaco-container {
    width: 100%;
    height: 100%;
    flex: 1;
}

/* Remove Monaco's default focus outline so our layout border takes over. */
#monaco-container .monaco-editor {
    outline: none;
}

/* Args / input-data textarea fills the pane. */
#args-input {
    flex: 1;
    width: 100%;
    height: 100%;
    padding: 12px;
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: none !important;
    outline: none !important;
    box-sizing: border-box;
}

/* ==========================================================================
   Output panel (right column)
   ========================================================================== */

#output-panel {
    width: 40%;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

/* Output header bar – fixed height. */
#output-header {
    flex-shrink: 0;
}

/* Output tab navigation – matches #editor-tab-nav styling. */
#output-tab-nav {
    flex-shrink: 0;
}

#output-tab-nav .nav-link {
    border-radius: 0;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--bs-body-color);
}

#output-tab-nav .nav-link:hover {
    background-color: var(--bs-secondary-bg);
}

#output-tab-nav .nav-link.active {
    color: var(--bs-primary);
    border-bottom: 2px solid var(--bs-primary);
}

/* Scrollable output content area (Console tab). */
#output-content {
    flex: 1;
    overflow-y: auto;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    padding: 8px 12px;
}

/* Demo Panel content area – no monospace, normal UI rendering. */
#demo-panel {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
}

/* ==========================================================================
   Output line styles
   ========================================================================== */

.output-line {
    padding: 1px 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.output-normal {
    color: var(--bs-body-color);
}

.output-error {
    color: var(--bs-danger);
}

.output-info {
    color: var(--bs-info);
}

.output-success {
    color: var(--bs-success);
}

/* ==========================================================================
   Button hover enhancements
   ========================================================================== */

#run-btn {
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

#run-btn:hover {
    filter: brightness(1.1);
}

#clear-btn {
    transition: background-color 0.15s ease, color 0.15s ease;
}

#clear-btn:hover {
    background-color: var(--bs-secondary);
    color: var(--bs-white);
}

/* ==========================================================================
   Mobile / narrow-screen responsive layout
   ========================================================================== */

@media (max-width: 991px) {
    /* Stack editor and output vertically. */
    #playground-main {
        flex-direction: column;
    }

    /* Editor panel takes the top 60 % of the viewport. */
    #editor-panel {
        flex: none;
        height: 60vh;
        border-right: none;
        border-bottom: 1px solid var(--bs-border-color);
    }

    /* Output panel fills the bottom 40 %. */
    #output-panel {
        width: 100%;
        height: 40vh;
    }
}