/* ==========================================================================
   workspace.css — Shared workspace shell CSS
   Scoped under .workspace-shell so rules are isolated and safe for multi-module use.
   Consumed by WorkspaceShell (Shared.UI) and its future module adopters.
   CSS custom-property values (--color-*, --space-*, etc.) are defined in site.css.
   ========================================================================== */

/* ── Shell root ──────────────────────────────────────────────────────────── */

/* WorkspaceShell renders as a flex column filling its parent.
   The parent must be a flex/grid container with a definite height (e.g. the Blazor
   layout body) for min-height:0 propagation to work correctly. */
.workspace-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* Fix MudDrawer positioning: set --mud-appbar-height to TcTabs height so both
       drawers start below the top tab navigation row. */
    --mud-appbar-height: var(--layout-tab-height, 70px);

    /* Mini-strip width shown when a side panel is collapsed (toggle icon only). */
    --mud-drawer-width-mini-left: 48px;
    --mud-drawer-width-mini-right: 48px;
}

/* MudLayout rendered as direct child of .workspace-shell must grow via flex:1 so it
   fills available height and provides a definite size for its descendants. */
.workspace-shell .workspace-layout {
    flex: 1;
    min-height: 0;
}

/* ── Center main content ─────────────────────────────────────────────────── */

.workspace-shell .workspace-main-content {
    flex: 1;
    height: 100%; /* height:100% fills MudLayout's own computed height and propagates
                    a definite size down to Cytoscape / AG Grid descendants. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    min-width: 0;
    min-height: 0;
    background: var(--color-grey-50, #fafafa);
    padding: 0 !important;
}

/* Optional toolbar strip above the center surface area */
.workspace-shell .workspace-toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: var(--space-8, 8px) var(--space-12, 12px);
    border-bottom: 1px solid var(--color-border, #d9d9d9);
    background: var(--color-surface, #fff);
    gap: var(--space-8, 8px);
}

/* ── Center shell — stable 3-row layout ─────────────────────────────────────
   Structure:
     .center-shell            — flex column, fills .workspace-main-content
       .center-main-region    — flex:1, the ONLY height-growing row
         (surface hosts)      — each fills main region; inactive ones use .center-view-hidden
       .center-bottom-row     — auto height, surface-switch buttons
   ========================================================================== */

.workspace-shell .center-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.workspace-shell .center-main-region {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Diagram host: Cytoscape owns its own viewport — no scrollbars */
.workspace-shell .center-diagram-host {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Table host: AG Grid needs overflow for both axes */
.workspace-shell .center-table-host {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

/* Generic surface host for custom surfaces */
.workspace-shell .center-surface-host {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

/* Inactive surface — completely hidden; active surface gets the full flex:1 */
.workspace-shell .center-view-hidden {
    display: none !important;
}

/* ── Bottom surface-switch strip ─────────────────────────────────────────── */

.workspace-shell .center-bottom-row {
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    border-top: 1px solid var(--color-border, #d9d9d9);
    background: var(--color-surface, #fff);
    gap: 0;
}

.workspace-shell .center-view-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 20px;
    flex: 1;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted, rgba(0,0,0,0.55));
    background: transparent;
    border: none;
    border-top: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    justify-content: center;
}

.workspace-shell .center-view-tab:hover:not(:disabled) {
    color: var(--color-text-secondary, rgba(0,0,0,0.78));
}

.workspace-shell .center-view-tab.active {
    color: var(--color-primary, #005f9e);
    border-top-color: var(--color-primary, #005f9e);
    border-top-width: medium;
}

.workspace-shell .center-view-tab:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Drawer tab strip ────────────────────────────────────────────────────── */

.workspace-shell .workspace-tabs {
    display: flex;
    align-items: center;
    height: 66px;
    gap: var(--space-4, 4px);
    border-bottom: 2px solid var(--color-border-subtle, #d9d9d9);
    flex-shrink: 0;
}

    .workspace-shell .tab-button {
        flex: 1;
        min-height: 64px;
        padding: var(--space-8, 8px) var(--space-12, 12px);
        font-size: 14px;
        font-weight: 600;
        line-height: 1.15;
        background: transparent;
        border: none;
        border-bottom: 3px solid transparent;
        color: var(--color-text-muted);
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
    }

.workspace-shell .tab-button:hover {
    background: var(--color-grey-50, #fafafa);
    color: var(--color-text-primary, #00437b);
}

        .workspace-shell .tab-button.active {
            color: var(--color-brand-primary);
            border-bottom-color: var(--color-brand-primary);
        }

/* Collapse/expand toggle at trailing end of workspace-tabs */
.workspace-shell .workspace-panel-toggle {
    margin-left: auto;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.workspace-shell .workspace-panel-toggle:hover {
    opacity: 1;
}

/* ── Drawer content area ─────────────────────────────────────────────────── */

/* Scrollable body below the tab strip */
.workspace-shell .workspace-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-10, 10px);
}

/* ── Collapsed / mini-drawer states ─────────────────────────────────────── */

/* Hide tab labels in mini strip — only the toggle icon fits in the 48 px strip */
.workspace-shell .workspace-left-panel.mud-drawer--closed .tab-button,
.workspace-shell .workspace-right-panel.mud-drawer--closed .tab-button {
    display: none;
}

/* Center the lone toggle button inside the 48 px mini strip */
.workspace-shell .workspace-left-panel.mud-drawer--closed .workspace-panel-toggle,
.workspace-shell .workspace-right-panel.mud-drawer--closed .workspace-panel-toggle {
    margin: auto;
}

/* Hide scrollable body in mini/collapsed state */
.workspace-shell .workspace-left-panel.mud-drawer--closed .workspace-content,
.workspace-shell .workspace-right-panel.mud-drawer--closed .workspace-content {
    display: none;
}

/* Hide resize handle when drawer is collapsed to the mini strip */
.workspace-shell .workspace-left-panel.mud-drawer--closed .workspace-drawer-resize-handle,
.workspace-shell .workspace-right-panel.mud-drawer--closed .workspace-drawer-resize-handle {
    display: none !important;
}

/* ── Drawer width resize (right edge of left drawer / left edge of right drawer) ── */

.workspace-shell .workspace-left-panel.mud-drawer--open .mud-drawer-content,
.workspace-shell .workspace-right-panel.mud-drawer--open .mud-drawer-content {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.workspace-shell .workspace-drawer-resize-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 12px;
    z-index: 6;
    cursor: ew-resize;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    pointer-events: auto;
}

.workspace-shell .workspace-drawer-resize-handle.is-hidden {
    display: none;
}

.workspace-shell .workspace-drawer-resize-handle--right {
    right: -6px;
}

.workspace-shell .workspace-drawer-resize-handle--left {
    left: 0;
}

.workspace-shell .workspace-drawer-resize-handle .split-layout-grip {
    opacity: 0;
}

.workspace-shell .workspace-drawer-resize-handle:hover .split-layout-grip,
.workspace-shell .workspace-drawer-resize-handle:focus-visible .split-layout-grip,
.workspace-shell .workspace-drawer-resizing .workspace-drawer-resize-handle .split-layout-grip {
    opacity: 1;
}

html.workspace-drawer-resizing,
html.workspace-drawer-resizing * {
    cursor: ew-resize !important;
    user-select: none !important;
}

html.workspace-drawer-resizing iframe {
    pointer-events: none !important;
}




/* WorkspaceCollapsibleCard — scoped styles.
   CSS variables from site.css :root are consumed here; no module stylesheet dependency. */

/* Card root */
.ws-card {
    padding: 0;
    overflow: hidden;
    margin-bottom: var(--space-8, 8px);
    border-radius: var(--radius-small, 4px);
    border: 1px solid var(--color-border, #d9d9d9);
    border-left: 4px solid var(--color-brand-primary, #005f9e);
    background: var(--color-surface, #fff);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
}

    /* Freeze hover lift in dense panels */
    .ws-card:hover {
        box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
    }

/* ── Header ─────────────────────────────────────────────────────────────── */

.ws-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-6, 6px);
    padding: var(--space-8, 8px) var(--space-12, 12px);
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid transparent;
    transition: background 0.15s ease;
}

    .ws-card-header:hover {
        background: var(--color-grey-100, #f3f5f7);
    }

/* Chevron — rotates down when collapsed */
.ws-card-chevron {
    flex-shrink: 0;
    color: var(--color-text-muted, rgba(0,0,0,0.55));
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.ws-card--collapsed .ws-card-chevron {
    transform: rotate(180deg);
}

/* Title (single-line header — default for existing consumers) */
.ws-card-title {
    flex: 1;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary, #00437b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Stacked title + subtitle (Workflow editor, aligned with infomodel-node-info-header) */
.ws-card-heading {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow: hidden;
}

    .ws-card-heading .ws-card-title {
        flex: unset;
    }

.ws-card-subtitle {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--color-text-muted, rgba(0,0,0,0.55));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* Count badge */
.ws-card-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3em;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--color-primary, #005f9e) 12%, var(--color-surface, #fff));
    color: var(--color-primary, #005f9e);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}

    .ws-card-badge.hidden {
        display: none;
    }

/* Header action slot */
.ws-card-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4, 4px);
    flex-shrink: 0;
}

.ws-card-below-header {
    border-bottom: 1px solid var(--color-border-subtle, #e2e8f0);
}

/* ── Body ───────────────────────────────────────────────────────────────── */

.ws-card-body {
    padding: var(--space-8, 8px) var(--space-12, 12px);
    display: flex;
    flex-direction: column;
    gap: var(--space-8, 8px);
}

.ws-card--collapsed .ws-card-body {
    display: none;
}

/* Editable title slot (Flow designer node header) */
.ws-card-title-slot {
    flex: 1;
    min-width: 0;
}

.ws-card-title-input {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-primary, #00437b);
    outline: none;
}

    .ws-card-title-input::placeholder {
        color: var(--color-text-muted, rgba(0,0,0,0.55));
        font-weight: 500;
    }

    .ws-card-title-input:focus {
        outline: none;
        box-shadow: 0 1px 0 0 var(--color-brand-primary, #005f9e);
    }

/* Chevron on the right — title grows, chevron stays trailing */
.ws-card--chevron-right .ws-card-title-slot,
.ws-card--chevron-right .ws-card-heading,
.ws-card--chevron-right .ws-card-title {
    flex: 1;
    min-width: 0;
}

.ws-card--chevron-right .ws-card-chevron {
    margin-left: var(--space-4, 4px);
}