/*
 * Page chrome and screen layout only. Anything that looks like a control or carries a colour, a radius
 * or a font belongs in css/design-system/components.css.
 */

html,
body {
    height: 100%;
}

body {
    margin: 0;
    overflow: hidden; /* the panel scrolls, the page does not */
}

/* The buttons at the foot of a card, or under a block. */

/* What sits at the right end of a list row: a status, then the row's one action. */
.app-row-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-3);
}

/* System connector cards: 400px each, as many to a row as fit. */
.app-connector-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-5);
}

.app-connector-grid > .ds-card {
    flex: 0 1 400px;
    min-width: 0;
}

/* Form fields a pack asked to sit side by side; they share the row evenly and wrap on a narrow screen. */
.app-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-4);
}

.app-form-row > * {
    flex: 1 1 130px;
    min-width: 0;
}

/* A note under the row's fields, across its whole width. */
.app-form-row > .app-form-row-note {
    flex-basis: 100%;
    margin: 0;
}

/* The inspect dialog: wide tables scroll sideways inside it, and a long cell is cut. */
.app-inspect-view {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
    align-items: flex-start;
}

.app-inspect-holder {
    align-self: stretch;
}

.app-inspect-entry > .ds-kv {
    margin-top: var(--ds-space-5);
}

.app-inspect-scroll {
    overflow-x: auto;
}

.app-inspect-table td {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-inspect-open {
    margin: var(--ds-space-4) 0;
}

.app-inspect-preview {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.app-inspect-preview > .ds-prose,
.app-inspect-preview > .ds-code {
    align-self: stretch;
}

.app-inspect-media {
    max-width: 100%;
    max-height: 70vh;
}

.app-inspect-frame {
    align-self: stretch;
    height: 70vh;
    border: 0;
}

/* A small icon button beside a label, on the label's line; lifted to the letters' middle, which sits above `middle`. */
.app-inline-action {
    position: relative;
    top: calc(1px - var(--ds-space-1));
    margin-left: var(--ds-space-2);
    vertical-align: middle;
}

/* A captioned block inside a card: its caption row, then its content. */
.app-card-block {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-2);
    min-width: 0;
    margin-top: var(--ds-space-5);
}

.app-card-block:first-child {
    margin-top: 0;
}

.app-card-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ds-space-3);
    min-height: var(--ds-control-height-xs);
}

.app-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    gap: var(--ds-space-5);
}

.app-card-grid .ds-progress {
    margin: var(--ds-space-4) 0;
}

.app-table-scroll {
    overflow-x: auto;
}

.app-nowrap {
    white-space: nowrap;
}

/* Rows of uneven height read from their first line. */
.app-table-top td {
    vertical-align: top;
}

/* The same columns in every group's table, so switching groups moves nothing; a longer name is clipped, not wrapped. */
.app-tools-table {
    table-layout: fixed;
}

.app-tools-table th:nth-child(1) {
    width: 12rem;
}

.app-tools-table th:nth-child(2) {
    width: 10rem;
}

.app-tools-table td:nth-child(-n + 2) {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The column that takes what the others leave. */
.app-table-fill {
    width: 100%;
}

/* A user who hasn't signed in yet, or an archived user or person. */
.app-not-signed-in,
.app-archived {
    opacity: 0.55;
}

/* The membership editor: its filter above the table. */
.app-membership-editor {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-4);
}

/* A column of pictures takes only the avatar's width. */
.app-table-avatar {
    width: 1%;
}

/* A trailing cell holding a row's action, as narrow as it and at the row's end. */
.app-table-action {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

/* The ingest and transform run tables, side by side when both fit. */
.app-run-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 550px), 1fr));
    column-gap: var(--ds-space-5);
    align-items: start;
}

/* A running run's result: the bar needs a width of its own, and a table cell gives it none. */
.app-run-live {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
}

.app-run-live .ds-progress {
    flex: none;
    width: 160px;
}

/* One entry of a list the configuration form grows: the entry, then its remove button. */
.app-schema-row {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-2);
}

.app-schema-row > :first-child {
    flex: 1;
    min-width: 0;
}

/* A rule editor: "Match" and its choice at the end of the heading, the kind column as narrow as its content, the kind
   and its fields side by side, and the add button its own width. */
.app-rules-match {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
}

.app-rules-kind {
    width: 1%;
}

.app-rules-kind > .ds-field {
    display: inline-block;
    vertical-align: top;
}

.app-rules-add {
    align-self: flex-end;
}

.app-notification {
    display: grid;
    gap: var(--ds-space-5);
}

.app-upload-add {
    display: flex;
    justify-content: center;
}

/* The small filters under the All users search, side by side on one line, each label cut short when narrow. */
.app-rail-filters {
    display: flex;
    gap: var(--ds-space-2);
}

.app-rail-filters > .ds-dropdown {
    flex: 1 1 0;
    min-width: 0;
}

.app-rail-filters > .ds-dropdown > .ds-btn {
    width: 100%;
}