/* ============================================================================
   studio-app-patch.css  — companion to /css/studio.css
   ----------------------------------------------------------------------------
   Provides the component classes that /static/app/index.html currently covers
   with inline style="" blobs.  Load AFTER studio.css.

   Two jobs:
     1. Fill gaps: classes that studio.css doesn't have (.menu, .banner, …)
     2. Extend: modifier classes for state (.left-collapsed, .right-collapsed)

   Nothing here re-declares a base rule already in studio.css.
   ============================================================================ */

/* ── 0. General utilities ────────────────────────────────────────────────────
   Supplement studio.css where a general rule is missing.
   ─────────────────────────────────────────────────────────────────────────── */
/* A flex spacer — pushes siblings apart. studio.css scopes this to
   .toolbar / .results-tabs / .status-bar; this makes it globally reusable. */
.spacer {
    flex: 1;
}

/* Query-status chip in the toolbar */
.query-status {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ide-text-muted);
}

/* Upload drop zone — cursor override */
.upload-drop {
    cursor: pointer;
}

/* ── 1. Flex-fill helper ──────────────────────────────────────────────────────
   Use on #pane-* / #drawer-* wrapper divs instead of:
       style="display:flex;flex-direction:column;flex:1;min-height:0;"
   ─────────────────────────────────────────────────────────────────────────── */
.pane,
.drawer-pane {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* ── 2. User chip (align app shell with Studio baseline) ──────────────────── */
.user-menu-host {
    position: relative;
}

.user-chip {
    cursor: pointer;
    padding: 0;
    border: none;
    background: none;
}
.user-chip:hover {
    background: none;
    border-color: transparent;
}
.user-chip__name,
.user-chip__caret {
    display: none;
}
.user-chip .avatar {
    display: inline-flex;
}

/* ── 3. Menu host + dropdown ─────────────────────────────────────────────────
   Replaces the position:relative wrapper div and the inline-styled dropdown.
   ─────────────────────────────────────────────────────────────────────────── */
.menu {
    position: absolute;
    top: 40px;
    right: 8px;
    z-index: 200;
    min-width: 180px;
    background: var(--ide-surface);
    border: 1px solid var(--ide-border);
    border-radius: var(--r-m);
    box-shadow: var(--shadow-menu);
    padding: 6px 0;
}
.menu--toolbar {
    top: calc(100% + 4px);
    right: 0;
    min-width: 170px;
    padding: 4px 0;
    z-index: 100;
}
.menu__info {
    padding: 8px 14px 6px;
    border-bottom: 1px solid var(--ide-border-soft);
    font-size: 11px;
    color: var(--ide-text-muted);
}
.menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    font-size: 12px;
    color: var(--ide-text);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background var(--t-fast);
}
.menu__item:hover {
    background: var(--ide-hover);
}
.menu__item--toolbar {
    padding: 7px 12px;
}
.menu__item--danger {
    color: var(--danger);
}
.menu__item--danger:hover {
    background: var(--danger-soft);
}

/* ── 4. Banners ──────────────────────────────────────────────────────────────
   Replaces inline styles on #error-banner / #info-banner.
   ─────────────────────────────────────────────────────────────────────────── */
.banner {
    padding: 8px 14px;
    font-size: 12px;
    flex-shrink: 0;
    line-height: 1.45;
}
.banner--error {
    background: var(--danger-soft);
    color: var(--danger);
    border-bottom: 1px solid rgba(213, 0, 0, 0.15);
    font-weight: 500;
}
.banner--info {
    background: var(--orange-soft);
    color: var(--opteryx-orange);
    border-bottom: 1px solid rgba(254, 119, 1, 0.15);
}

/* ── 5. Monaco editor container ──────────────────────────────────────────────
   Monaco needs an explicit pixel height — it measures its container on mount
   and won't grow/shrink responsively via flex alone. We give it a fixed
   240px (matching the design-spec .editor max-height) and let .results take
   the remaining space via flex:1.
   ─────────────────────────────────────────────────────────────────────────── */
.editor-host {
    flex: 0 0 200px; /* fixed 200px — matches ~9 lines visible in design */
    height: 200px;
    max-height: 200px;
    border-bottom: 1px solid var(--ide-border);
    position: relative;
    overflow: hidden;
}

/* ── 6. Results panes ────────────────────────────────────────────────────────
   Replaces inline flex/overflow/background/padding on each results panel div.
   ─────────────────────────────────────────────────────────────────────────── */
.results-pane {
    flex: 1;
    overflow: auto;
    background: var(--ide-surface);
}
.results-pane--padded {
    padding: 12px;
}
.results-pane--alt {
    background: var(--ide-surface-2);
}

/* ── 7. Results footer ───────────────────────────────────────────────────────
   Replaces the inline style on #results-footer.
   ─────────────────────────────────────────────────────────────────────────── */
.results-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px;
    border-top: 1px solid var(--ide-border);
    font-size: 11px;
    color: var(--ide-text-muted);
    background: var(--ide-surface-2);
    flex-shrink: 0;
}
.results-footer .spacer {
    flex: 1;
}

/* ── 8. Drawer iframe ────────────────────────────────────────────────────────
   Replaces: style="width:100%;height:100%;border:none;"
   ─────────────────────────────────────────────────────────────────────────── */
.drawer-iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ── 9. Rail collapse state classes ─────────────────────────────────────────
   Applied to .ide-main by studio-app-shell.js instead of mutating
   style.gridTemplateColumns from inline onclick blobs.

   Note: .ide-main base grid is defined in studio.css. These are modifiers only.
   ─────────────────────────────────────────────────────────────────────────── */
.ide-main {
    transition: grid-template-columns var(--t-base);
}
.ide-main.left-collapsed {
    grid-template-columns: 0 1fr 300px;
}
.ide-main.right-collapsed {
    grid-template-columns: 232px 1fr 0;
}
.ide-main.left-collapsed.right-collapsed {
    grid-template-columns: 0 1fr 0;
}

/* ── 11. Dataset tree — schema row & label classes ─────────────────────────
   The JS renderTree() builds schema headers with .tree-row--schema and
   label spans with .tree-schema-label / .tree-schema-tag.
   ─────────────────────────────────────────────────────────────────────────── */
.tree-row--schema {
    font-weight: 500;
    color: var(--ide-text);
    cursor: pointer;
    user-select: none;
    padding-left: 8px;
}
.tree-row--schema:hover {
    background: var(--ide-hover);
    color: var(--opteryx-teal);
}
.tree-schema-label {
    flex: 1;
    font-size: 12px;
}
.tree-schema-tag {
    font-size: 10px;
    color: var(--ide-text-muted);
    margin-left: 6px;
}

/* Row-actions: visible on hover/focus of the leaf row */
.row-actions {
    display: none;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}
.tree-row.leaf:hover .row-actions,
.tree-row.leaf:focus-within .row-actions {
    display: flex;
}

/* tree-label: the table name text beside the icon */
.tree-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* icon span holding an injected SVG inside tree rows */
.tree-row .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: var(--ide-text-muted);
}

/* ── 10. Layout height-fill fixes ──────────────────────────────────────────
   The shell must be locked to the viewport and the main workspace row must
   use minmax(0, 1fr) so panel content cannot change the page height.
   ─────────────────────────────────────────────────────────────────────────── */
.ide {
    grid-template-rows: 40px auto minmax(0, 1fr) 36px;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
}

.ide-main {
    grid-template-columns: 232px minmax(0, 1fr) 300px;
    min-height: 0;
    overflow: hidden;
}

.ide-main.left-collapsed {
    grid-template-columns: 0 minmax(0, 1fr) 300px;
}
.ide-main.right-collapsed {
    grid-template-columns: 232px minmax(0, 1fr) 0;
}
.ide-main.left-collapsed.right-collapsed {
    grid-template-columns: 0 minmax(0, 1fr) 0;
}

.center,
.sidebar,
.drawer,
.results,
.results-pane,
.editor-host {
    min-height: 0;
}

.center,
.sidebar,
.drawer,
.results {
    overflow: hidden;
    min-height: 0;
    max-height: 100%;
}

/* Hide the aside contents when its grid track is collapsed to zero,
   so the border doesn't bleed through. */
.ide-main.left-collapsed > .sidebar {
    overflow: hidden;
}
.ide-main.right-collapsed > .drawer {
    overflow: hidden;
}

/* -- 12. Recent queries list - row structural classes ---------------------
   renderRecentItem() builds its DOM with these classes. The base
   .recent-row, .recent-row .sql are already in studio.css; these supply
   the sub-element layout.
   ----------------------------------------------------------------------- */

/* Always-visible row-actions in the recent list (no hover gate needed) */
.recent-row .row-actions {
    display: flex;
    margin-left: auto;
    flex-shrink: 0;
}

/* Header line: status icon + meta on left, action buttons on right */
.recent-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}
.recent-row-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

/* Inline meta text (shape . duration . size . age) */
.recent-row-meta {
    font-size: 11px;
    color: var(--ide-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Title (description) row */
.recent-row-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 1px;
}
.recent-row-title-left {
    min-width: 0;
    flex: 1;
}
.recent-row-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--ide-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* SQL preview - pairs with .sql from studio.css for mono/truncate rules */
.recent-row-sql {
    margin-top: 2px;
}

/* Status dot colours used by statusIcon() on .recent-status-icon */
.recent-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}
.recent-status-icon.status-dot-success {
    color: var(--success);
}
.recent-status-icon.status-dot-error {
    color: var(--danger);
}
.recent-status-icon.status-dot-info {
    color: var(--opteryx-teal);
}
.recent-status-icon.status-dot-muted {
    color: var(--ide-text-muted);
}