/* Shared operations layout and dense-table system. Loaded after component CSS. */

.workspace-body > .page-header:first-child,
.workspace-body .page-header {
    display: flex;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.workspace-body .page-header:has(.page-header-actions),
.workspace-body .page-header:has(> div + div) {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.workspace-body .page-header h1,
.workspace-body .page-header p {
    margin: 0;
}
.workspace-body .page-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.workspace-body .card-panel > h4:first-child,
.workspace-body .table-card-header h4,
.workspace-body .table-card-header h2.h4 {
    font-size: 16px;
    margin-bottom: 2px;
}
.workspace-body .table-card-header p {
    color: var(--sp-color-ink-subtle);
    font-size: 12px;
    margin: 2px 0 0;
}
.workspace-body .table-card-header {
    min-height: 42px;
    box-sizing: border-box;
}
.workspace-body .modal-actions,
.workspace-body .edit-popup-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--sp-color-surface);
    border-top: 1px solid var(--sp-color-border);
    padding-top: 8px;
}

.storm-selector {
    display: grid;
    grid-template-columns: auto minmax(170px, 280px) auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.storm-selector-label {
    color: var(--sp-color-ink-subtle);
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    white-space: nowrap;
}
.storm-selector-control {
    min-height: 31px;
    height: 31px;
    padding: 4px 7px;
    font-size: 12px;
    border-radius: 7px;
}
.storm-selector-open {
    min-height: 31px;
    border: 1px solid var(--sp-color-border-strong);
    border-radius: 7px;
    padding: 4px 8px;
    background: var(--sp-color-surface);
    color: var(--sp-color-ink);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.storm-selector-open:hover {
    background: var(--sp-color-surface-raised);
}

html[data-theme="dark"] .storm-selector-open {
    border-color: var(--sp-color-border);
    background: var(--sp-color-surface);
    color: var(--sp-color-ink);
}

html[data-theme="dark"] .storm-selector-open:hover,
html[data-theme="dark"] .storm-selector-open:focus-visible {
    border-color: var(--sp-color-brand);
    background: var(--sp-color-brand-soft);
    color: var(--sp-color-ink);
    outline: none;
}

/* The shared data table — frame, toolbar, scroll port, header, rows, density,
   column chooser, paging and print rules — lives in
   wwwroot/styles/core/ui-data-table.css. It is a primitive used on nearly every
   administrative route, so it is linked eagerly from App.razor instead of being
   lazy-loaded with this feature sheet. Page-specific table rules still belong
   here; the pieces below are what this workspace layers on top of it. */

@media (max-width: 900px) {
    .workspace-body .page-header:has(.page-header-actions),
    .workspace-body .page-header:has(> div + div) {
        flex-direction: column;
        align-items: stretch;
    }
    .workspace-body .page-header-actions {
        margin-left: 0;
    }
    .storm-selector {
        grid-template-columns: 1fr auto;
        width: 100%;
    }
    .storm-selector-label {
        grid-column: 1 / -1;
    }
}

@media print {
    .workspace-header,
    .app-sidebar {
        display: none;
    }
}

.workspace-header-minimal .workspace-header-actions {
    flex-wrap: wrap;
    min-width: 0;
}
@media (max-width: 1180px) {
    .storm-selector {
        grid-template-columns: minmax(145px, 220px) auto;
    }
    .storm-selector-label {
        display: none;
    }
}
@media (max-width: 700px) {
    .workspace-header-minimal .storm-selector {
        order: 4;
        grid-template-columns: minmax(0, 1fr) auto;
        flex: 1 0 100%;
    }
}