/* --- Application Shared Layouts --- */
/* Classes here are used by 2+ apps, or are generic layout primitives.
   App-specific styles live in that app's own folder (src/apps/<Name>/<Name>.css). */

.dual-pane-app {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: var(--bg-void);
}

.app-sidebar {
    width: 250px;
    background-color: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.app-content {
    flex: 1;
    padding: 32px;
    overflow-y: auto;
    color: var(--text-primary);
}

.os-button {
    background-color: rgba(74, 144, 226, 0.1);
    color: var(--accent-blue);
    border: 1px solid var(--accent-blue);
    padding: 14px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-top: 16px;
}

.os-button:hover {
    background-color: var(--accent-blue);
    color: var(--bg-void);
}

.app-content-area--reset {
    padding: 0;
    overflow: hidden;
}
.app-content-area--flex {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.app-content-area--flex-layered {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    height: 100%;
}