/* SuperSDM premium control-room skin.
   Deliberately keeps the existing DOM and interaction model intact. */
:root {
    /* Light themes: the control-room skin keeps its layout but takes the theme palette. */
    --premium-ink: var(--theme-text);
    --premium-muted: var(--theme-muted);
    --premium-dim: var(--theme-text-dim);
    --premium-ink-soft: var(--theme-text-soft);
    --premium-line: color-mix(in srgb, var(--theme-border) 55%, transparent);
    --premium-line-strong: color-mix(in srgb, var(--theme-accent) 45%, transparent);
    --premium-panel: var(--theme-surface);
    --premium-panel-raised: var(--theme-surface-2);
    --premium-panel-inset: var(--theme-surface-soft);
    --premium-cyan: var(--theme-accent);
    --premium-cyan-strong: var(--theme-accent-strong);
    --premium-amber: var(--theme-warning);
    --premium-green: var(--theme-success);
    --premium-page: var(--theme-bg-page);
    --premium-page-2: var(--theme-bg-page-2);
    --premium-chrome: color-mix(in srgb, var(--theme-surface) 94%, transparent);
    --premium-sunken: var(--theme-surface-soft);
    --premium-card: var(--theme-surface);
    --premium-card-alpha: color-mix(in srgb, var(--theme-surface) 90%, transparent);
}

/* Codex (dark) theme keeps the original dark control-room palette. */
:root[data-theme="codex"] {
    --premium-ink: #e7f0f4;
    --premium-muted: #8fa7b4;
    --premium-dim: #7d95a3; /* AA on --premium-panel */
    --premium-ink-soft: #c4d9df;
    --premium-line: rgba(148, 183, 198, .17);
    --premium-line-strong: rgba(99, 199, 224, .44);
    --premium-panel: #101b24;
    --premium-panel-raised: #152631;
    --premium-panel-inset: #0c151d;
    --premium-cyan: #63d5e7;
    --premium-cyan-strong: #2aaec7;
    --premium-amber: #e7b86a;
    --premium-green: #7dd3a6;
    --premium-page: #09131b;
    --premium-page-2: #0b1721;
    --premium-chrome: rgba(10, 21, 29, .94);
    --premium-sunken: #0b151d;
    --premium-card: #10202a;
    --premium-card-alpha: rgba(16, 29, 38, .9);
}

/* Codex theme: the workspace is a dark control room, so inside it the shared theme tokens point
   at the premium palette and --theme-* / glass styled components stay readable on dark panels. */
html[data-theme="codex"] body:not(.docker-builder-page):not(.docker-builder-embed) {
    --theme-bg-page: #09131b;
    --theme-bg-page-2: #0b1721;
    --theme-surface: var(--premium-panel);
    --theme-surface-2: var(--premium-panel-raised);
    --theme-surface-soft: var(--premium-panel-inset);
    --theme-border: color-mix(in srgb, #94b7c6 26%, var(--premium-panel));
    --theme-border-strong: color-mix(in srgb, #63c7e0 44%, var(--premium-panel));
    --theme-text: var(--premium-ink);
    --theme-text-soft: color-mix(in srgb, var(--premium-ink) 72%, var(--premium-muted));
    --theme-muted: var(--premium-muted);
    --theme-success: var(--premium-green);
    --theme-warning: var(--premium-amber);
    /* Raw tokens are read directly by workspace-glasswave.css. */
    --theme-page: #09131b;
    --theme-surface-base: var(--premium-panel);
    --theme-surface-raised: var(--premium-panel-raised);
    --theme-surface-inset: var(--premium-panel-inset);
    --theme-border-base: color-mix(in srgb, #94b7c6 26%, var(--premium-panel));
    --theme-border-emphasis: color-mix(in srgb, #63c7e0 44%, var(--premium-panel));
    --theme-text-primary: var(--premium-ink);
    --theme-text-secondary: color-mix(in srgb, var(--premium-ink) 72%, var(--premium-muted));
    --theme-text-muted: var(--premium-muted);
    --theme-success-strong: var(--premium-green);
    --theme-warning-strong: var(--premium-amber);
    /* Brand accent is too dark for links on these panels; use the premium cyan family. */
    --theme-link: var(--premium-cyan);
    --accent-color: var(--premium-cyan);
    --surface-canvas: #09131b;
    --surface-glass: color-mix(in srgb, var(--premium-panel) 90%, transparent);
    --surface-glass-strong: color-mix(in srgb, var(--premium-panel-raised) 94%, transparent);
    --surface-glass-muted: color-mix(in srgb, var(--premium-panel-inset) 88%, transparent);
    --surface-inset: var(--premium-panel-inset);
    --glass-border: var(--premium-line);
    --glass-highlight: rgba(255, 255, 255, .06);
    --glass-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, .04);
}

body:not(.docker-builder-page):not(.docker-builder-embed) {
    color: var(--premium-ink) !important;
    background: var(--premium-page) !important;
    background-image: linear-gradient(145deg, var(--premium-page) 0%, var(--premium-page-2) 50%, var(--premium-page-2) 100%)!important;
    font-family: Inter, "Segoe UI", system-ui, sans-serif !important;
    letter-spacing: .005em;
}

body:not(.docker-builder-page):not(.docker-builder-embed) .navbar {
    height: 58px !important;
    padding: 0 18px !important;
    background: var(--premium-chrome) !important;
    border-bottom: 1px solid var(--premium-line) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .24) !important;
    backdrop-filter: none;
}

body:not(.docker-builder-page):not(.docker-builder-embed) .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-right: 18px !important;
    color: var(--premium-ink) !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

body:not(.docker-builder-page):not(.docker-builder-embed) .navbar-brand .fa-atom {
    color: var(--premium-cyan) !important;
    filter: drop-shadow(0 0 9px color-mix(in srgb, var(--premium-cyan) 42%, transparent));
}

body:not(.docker-builder-page):not(.docker-builder-embed) .navbar-brand .badge {
    padding: 3px 6px !important;
    border: 1px solid color-mix(in srgb, var(--premium-cyan) 48%, transparent);
    border-radius: 4px !important;
    background: color-mix(in srgb, var(--premium-cyan) 12%, transparent) !important;
    color: var(--premium-cyan-strong) !important;
    font-size: var(--fs-2xs) !important;
    letter-spacing: .12em;
}

body:not(.docker-builder-page):not(.docker-builder-embed) .navbar .btn,
body:not(.docker-builder-page):not(.docker-builder-embed) .ws-theme-inline,
body:not(.docker-builder-page):not(.docker-builder-embed) #ws-theme-select-workspace,
body:not(.docker-builder-page):not(.docker-builder-embed) #ws-locale-select-workspace {
    color: var(--premium-ink-soft) !important;
    background: transparent !important;
    border-color: transparent !important;
    border-radius: 6px !important;
}

body:not(.docker-builder-page):not(.docker-builder-embed) .navbar .btn {
    min-height: var(--btn-h) !important;
    padding-inline: var(--btn-px) !important;
    border-radius: var(--btn-radius) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    font-size: var(--fs-xs) !important;
    font-weight: 650 !important;
    letter-spacing: .025em;
}

body:not(.docker-builder-page):not(.docker-builder-embed) .navbar .btn:hover,
body:not(.docker-builder-page):not(.docker-builder-embed) .navbar .btn:focus-visible {
    color: var(--premium-ink) !important;
    background: color-mix(in srgb, var(--premium-cyan) 13%, transparent) !important;
    border-color: color-mix(in srgb, var(--premium-cyan) 25%, transparent) !important;
    box-shadow: none !important;
    transform: none !important;
}

body:not(.docker-builder-page):not(.docker-builder-embed) .navbar .btn i { color: var(--premium-cyan) !important; }
/* Icon-only toolbar buttons are square; "Fast run" is the single primary action. */
body:not(.docker-builder-page):not(.docker-builder-embed) .navbar .btn:not(:has(span)):not(.dropdown-toggle-split) {
    min-width: var(--btn-h) !important;
    padding-inline: 0 !important;
}
body:not(.docker-builder-page):not(.docker-builder-embed) .navbar .ws-fast-run-btn {
    min-height: var(--btn-h) !important;
    padding-inline: var(--btn-px) !important;
    color: var(--btn-primary-text) !important;
    background: var(--btn-primary-bg) !important;
    border: 1px solid var(--btn-primary-bg) !important;
    border-radius: var(--btn-radius) !important;
    box-shadow: none !important;
    font-weight: var(--btn-weight) !important;
}
body:not(.docker-builder-page):not(.docker-builder-embed) .navbar .ws-fast-run-btn:hover {
    background: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
}
body:not(.docker-builder-page):not(.docker-builder-embed) .navbar .ws-fast-run-btn i { color: inherit !important; }

body:not(.docker-builder-page):not(.docker-builder-embed) .main-container,
body:not(.docker-builder-page):not(.docker-builder-embed) #main-layout {
    top: 58px !important;
    /* status bar (34px) + collapsed console header (38px); not !important so
       UI.toggleTerminal() can lift the editor above the opened console. */
    bottom: 72px;
    background: transparent !important;
}

body:not(.docker-builder-page):not(.docker-builder-embed) .sidebar {
    width: 282px;
    background: var(--premium-card-alpha) !important;
    border-right: 1px solid var(--premium-line) !important;
    box-shadow: 14px 0 40px rgba(0, 0, 0, .16);
}
body:not(.docker-builder-page):not(.docker-builder-embed) .file-tree,
body:not(.docker-builder-page):not(.docker-builder-embed) .sidebar .file-tree,
body:not(.docker-builder-page):not(.docker-builder-embed) .sidebar .sidebar-content {
    background: var(--premium-sunken) !important;
    color: var(--premium-muted) !important;
}
body:not(.docker-builder-page):not(.docker-builder-embed) .sidebar-header {
    height: 50px;
    padding: 0 16px !important;
    color: var(--premium-ink-soft) !important;
    border-bottom: 1px solid var(--premium-line) !important;
    font-size: var(--fs-xs) !important;
    letter-spacing: .17em;
    background: var(--premium-sunken) !important;
    background-image: none !important;
}
body:not(.docker-builder-page):not(.docker-builder-embed) .sidebar-header button,
body:not(.docker-builder-page):not(.docker-builder-embed) .task-tool-btn {
    color: var(--premium-muted) !important;
    border: 1px solid transparent !important;
    border-radius: 5px !important;
}
body:not(.docker-builder-page):not(.docker-builder-embed) .sidebar-header button:hover,
body:not(.docker-builder-page):not(.docker-builder-embed) .task-tool-btn:hover {
    color: var(--premium-cyan) !important;
    background: color-mix(in srgb, var(--premium-cyan) 10%, transparent) !important;
}
body:not(.docker-builder-page):not(.docker-builder-embed) .tree-item {
    height: 34px;
    padding: 0 16px !important;
    color: var(--premium-muted) !important;
    border-left: 2px solid transparent !important;
    font-size: 12px !important;
}
body:not(.docker-builder-page):not(.docker-builder-embed) .tree-item:hover { background: color-mix(in srgb, var(--premium-cyan) 10%, transparent) !important; color: var(--premium-ink) !important; }
body:not(.docker-builder-page):not(.docker-builder-embed) .tree-item.active,
body:not(.docker-builder-page):not(.docker-builder-embed) .tree-item.selected {
    color: var(--premium-ink) !important;
    background: color-mix(in srgb, var(--premium-cyan) 14%, transparent) !important;
    border-left-color: var(--premium-cyan) !important;
}

body:not(.docker-builder-page):not(.docker-builder-embed) .editor-area {
    background: var(--premium-sunken) !important;
}
body:not(.docker-builder-page):not(.docker-builder-embed) .tabs-header {
    height: 42px;
    background: var(--premium-card-alpha) !important;
    border-bottom: 1px solid var(--premium-line) !important;
}
body:not(.docker-builder-page):not(.docker-builder-embed) .pane-header-tabs {
    background: var(--premium-card) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--premium-line) !important;
}
body:not(.docker-builder-page):not(.docker-builder-embed) .tab-item {
    min-width: 148px;
    color: var(--premium-dim) !important;
    background: transparent !important;
    border-right: 1px solid var(--premium-line) !important;
    font-size: var(--fs-xs);
}
body:not(.docker-builder-page):not(.docker-builder-embed) .tab-item.active {
    color: var(--premium-ink) !important;
    background: color-mix(in srgb, var(--premium-cyan) 10%, transparent) !important;
    border-top: 2px solid var(--premium-cyan) !important;
}
body:not(.docker-builder-page):not(.docker-builder-embed) .content-body,
body:not(.docker-builder-page):not(.docker-builder-embed) .editor-pane {
    background: var(--premium-sunken) !important;
}
body:not(.docker-builder-page):not(.docker-builder-embed) .pane-content,
body:not(.docker-builder-page):not(.docker-builder-embed) .view-container,
body:not(.docker-builder-page):not(.docker-builder-embed) #dashboard-view,
body:not(.docker-builder-page):not(.docker-builder-embed) #preview-container-0,
body:not(.docker-builder-page):not(.docker-builder-embed) .monaco-editor,
body:not(.docker-builder-page):not(.docker-builder-embed) .grid-container {
    background: var(--premium-sunken) !important;
    color: var(--premium-muted) !important;
}
body:not(.docker-builder-page):not(.docker-builder-embed) .grid-container {
    background-image:
        linear-gradient(rgba(126, 184, 199, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(126, 184, 199, .04) 1px, transparent 1px) !important;
    background-size: 32px 32px !important;
}
body:not(.docker-builder-page):not(.docker-builder-embed) .breadcrumb-nav {
    min-height: 42px;
    padding: 0 16px !important;
    display: flex;
    align-items: center;
    background: var(--premium-card) !important;
    border-bottom: 1px solid var(--premium-line) !important;
    color: var(--premium-muted) !important;
    background-image: none !important;
}
body:not(.docker-builder-page):not(.docker-builder-embed) #breadcrumb {
    background: var(--premium-card) !important;
    background-image: none !important;
}
body:not(.docker-builder-page):not(.docker-builder-embed) .editor-tab {
    background: var(--premium-card) !important;
    color: var(--premium-ink-soft) !important;
    border-color: var(--premium-line) !important;
}
body:not(.docker-builder-page):not(.docker-builder-embed) .dashboard-watermark { color: var(--premium-dim) !important; }
body:not(.docker-builder-page):not(.docker-builder-embed) .editor-pane.active-pane {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--premium-cyan) 20%, transparent) !important;
}
body:not(.docker-builder-page):not(.docker-builder-embed) .dashboard-view {
    background:
        linear-gradient(rgba(126, 184, 199, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(126, 184, 199, .04) 1px, transparent 1px),
        var(--premium-sunken) !important;
    background-size: 32px 32px !important;
}
body:not(.docker-builder-page):not(.docker-builder-embed) .dashboard-view .grid-item,
body:not(.docker-builder-page):not(.docker-builder-embed) .dashboard-view .empty-state {
    color: var(--premium-muted) !important;
}

body:not(.docker-builder-page):not(.docker-builder-embed) #terminal-panel {
    /* Sit on top of the 34px status bar; collapsed height matches the 38px header. */
    bottom: 34px;
    height: 38px;
    background: var(--premium-sunken) !important;
    border-top: 1px solid var(--premium-line) !important;
    box-shadow: 0 -12px 30px rgba(0, 0, 0, .16);
}
body:not(.docker-builder-page):not(.docker-builder-embed) #terminal-panel.open { height: 320px; }
body:not(.docker-builder-page):not(.docker-builder-embed) .terminal-header {
    height: 38px;
    padding: 0 16px !important;
    background: var(--premium-card) !important;
    color: var(--premium-ink-soft) !important;
    border-bottom: 1px solid var(--premium-line) !important;
    font-size: var(--fs-xs) !important;
    letter-spacing: .12em;
    text-transform: uppercase;
}
body:not(.docker-builder-page):not(.docker-builder-embed) .terminal-body { background: var(--premium-page) !important; }
body:not(.docker-builder-page):not(.docker-builder-embed) .status-bar {
    height: 34px !important;
    padding: 0 14px !important;
    color: var(--premium-ink-soft) !important;
    background: var(--premium-sunken) !important;
    border-top: 1px solid var(--premium-line) !important;
    font-size: var(--fs-xs) !important;
    letter-spacing: .035em;
}
body:not(.docker-builder-page):not(.docker-builder-embed) .status-bar .text-success,
body:not(.docker-builder-page):not(.docker-builder-embed) .status-bar .text-info { color: var(--premium-green) !important; }
body:not(.docker-builder-page):not(.docker-builder-embed) .status-bar .progress { background: var(--premium-panel-raised) !important; }

@media (max-width: 1240px) {
    body:not(.docker-builder-page):not(.docker-builder-embed) .navbar { height: 52px !important; }
    body:not(.docker-builder-page):not(.docker-builder-embed) .main-container,
    body:not(.docker-builder-page):not(.docker-builder-embed) #main-layout { top: 52px !important; }
    body:not(.docker-builder-page):not(.docker-builder-embed) #ws-navbar-content { top: 60px !important; background: var(--premium-card) !important; border-color: var(--premium-line-strong) !important; }
}
@media (max-width: 700px) {
    /* Narrow screens: the file tree yields most of the width to the editor (collapse still wins). */
    body:not(.docker-builder-page):not(.docker-builder-embed) .sidebar:not(.collapsed) { width: min(42vw, 220px); min-width: 120px; }
    body:not(.docker-builder-page):not(.docker-builder-embed) .editor-area { min-width: 0; }
    body:not(.docker-builder-page):not(.docker-builder-embed) .status-bar { font-size: var(--fs-2xs) !important; }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.docker-builder-page):not(.docker-builder-embed) * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}


/* Readability pass: toolbar labels never break mid-word; the toolbar scrolls when it runs out of room. */
body:not(.docker-builder-page):not(.docker-builder-embed) #ws-navbar-content { min-width: 0; }
body:not(.docker-builder-page):not(.docker-builder-embed) #ws-navbar-content > .d-flex {
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
body:not(.docker-builder-page):not(.docker-builder-embed) #ws-navbar-content > .d-flex::-webkit-scrollbar { display: none; }
body:not(.docker-builder-page):not(.docker-builder-embed) #ws-navbar-content :is(.btn, .btn span, .dropdown-toggle) {
    white-space: nowrap;
    flex-shrink: 0;
}
body:not(.docker-builder-page):not(.docker-builder-embed) .status-bar,
body:not(.docker-builder-page):not(.docker-builder-embed) .status-bar * { white-space: nowrap; }
@media (max-width: 1100px) {
    /* Narrow screens: the Tasks/Load and version/credit columns drop out; CPU/MEM/APP stay visible. */
    body:not(.docker-builder-page):not(.docker-builder-embed) .status-bar div:has(> div > #stat-tasks) { display: none !important; }
    /* The version/credit column has no room on phones (the version is in the user menu). */
    body:not(.docker-builder-page):not(.docker-builder-embed) .status-bar div:has(> .status-record-wrap) { display: none !important; }
}

/* The shared site top bar carries brand, navigation and the account menu; the workspace bar
   below it is a single-row editor tool bar (file actions, run, docks, terminal, current path). */
body.ws-shell-enabled:not(.docker-builder-page):not(.docker-builder-embed) .navbar {
    position: fixed !important;
    top: var(--ws-shell-top-height) !important;
    left: 0;
    right: 0;
    z-index: 3900;
    height: 46px !important;
}
body.ws-shell-enabled:not(.docker-builder-page):not(.docker-builder-embed) .main-container,
body.ws-shell-enabled:not(.docker-builder-page):not(.docker-builder-embed) #main-layout { top: calc(var(--ws-shell-top-height) + 46px) !important; }
body.ws-shell-enabled.ai-app-fullscreen:not(.docker-builder-page):not(.docker-builder-embed) .main-container,
body.ws-shell-enabled.ai-app-fullscreen:not(.docker-builder-page):not(.docker-builder-embed) #main-layout { top: var(--ws-shell-top-height) !important; }
@media (max-width: 1240px) {
    body.ws-shell-enabled:not(.docker-builder-page):not(.docker-builder-embed) #ws-navbar-content { top: calc(var(--ws-shell-top-height) + 52px) !important; }
}
@media (min-width: 1241px) {
    body:not(.docker-builder-page):not(.docker-builder-embed) .navbar { flex-wrap: nowrap !important; gap: 12px; }
    body:not(.docker-builder-page):not(.docker-builder-embed) #ws-navbar-content { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
    body:not(.docker-builder-page):not(.docker-builder-embed) #ws-navbar-content > .btn-group { flex: 0 0 auto; }
    body:not(.docker-builder-page):not(.docker-builder-embed) #ws-navbar-content > .d-flex { flex: 0 1 auto; min-width: 0; }
    body:not(.docker-builder-page):not(.docker-builder-embed) .navbar > .d-flex:last-child { flex: 0 1 auto; min-width: 0; }
    body:not(.docker-builder-page):not(.docker-builder-embed) .navbar #breadcrumb { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 1241px) and (max-width: 1439px) {
    /* Icon-only dock buttons (each keeps its title tooltip); Fast Run keeps its label. */
    body:not(.docker-builder-page):not(.docker-builder-embed) #ws-navbar-content .ws-nav-btn:not(.ws-fast-run-btn) > span[data-i18n] { display: none; }
    body:not(.docker-builder-page):not(.docker-builder-embed) #ws-navbar-content .ws-nav-btn:not(.ws-fast-run-btn) > i { margin-right: 0 !important; }
    body:not(.docker-builder-page):not(.docker-builder-embed) .navbar #breadcrumb { max-width: 200px; }
}
@media (max-width: 420px) {
    /* Smallest phones: only the live CPU / MEM / APP monitors remain in the status bar. */
    body:not(.docker-builder-page):not(.docker-builder-embed) .status-bar > .text-truncate:first-child { display: none !important; }
    body:not(.docker-builder-page):not(.docker-builder-embed) .status-bar { padding: 0 8px !important; }
    body:not(.docker-builder-page):not(.docker-builder-embed) .status-bar .monitor-col[title="Swap Usage"] { display: none !important; }
}