/* ---- the Columns list dialog ---- */

.dynamic-list-body {
    margin: 0 0 25px 0;
    /* as wide as the table, so the sticky Add bar also covers the rows when scrolled sideways */
    width: max-content;
    min-width: 100%;
}

/* the Add bar stays visible while the column list scrolls.
   .dialog-main-area has 12px of padding at the top - the sticky bar has to reach up into it,
   otherwise rows show ("bleed") above the Add button while scrolling.
   the 12px must match iScrollPadTop in dynamic_list.js */
.dynamic-list-add-bar {
    position: sticky;
    top: -12px;
    /* above the sticky table headers so they scroll under the Add button */
    z-index: 20;
    background: var(--color-cards-background);
    padding: 12px 0 8px 0;
    margin-top: -12px;
}

.dynamic-list-table {
    width: auto;
    table-layout: auto;
    border-collapse: collapse;
}

.dynamic-list-th {
    border-bottom: 1px solid #ccc;
    padding: 4px 8px;
    text-align: left;
    white-space: nowrap;
}

/* 'narrow' columns hold a short number or a tick - they get a fixed small width
   and their caption wraps onto 2 lines */
.dynamic-list-th-narrow {
    text-align: center;
    width: 58px;
    white-space: normal;
}

.dynamic-list-td {
    border-bottom: 1px solid #eee;
    padding: 4px 8px;
    white-space: nowrap;
}

.dynamic-list-td-center {
    text-align: center;
}

/* the row last opened in the editor, so it's obvious which one was just edited.
   same colours as tr.selected in tables_v47.css */
.dynamic-list-table tbody tr.dynamic-list-tr-edited {
    background-color: var(--color-table-row-selected);
}

.dynamic-list-table tbody tr.dynamic-list-tr-edited > td {
    color: var(--color-table-row-selected-forecolor);
}

.dynamic-list-td-empty {
    padding: 8px;
}

.dynamic-list-icon-delete {
    margin-left: 10px;
}


/* ---- the Add / Edit column dialogs ---- */

.dynamic-list-add-body {
    margin: 25px 0 40px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dynamic-list-edit-body {
    margin: 25px 0 40px 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
}

/* the groups sit in two columns side by side */
.dynamic-list-edit-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

/* a bordered group (fieldset) with a caption, used to group the editor fields */
.dynamic-list-group {
    border: 1px solid silver;
    border-radius: 6px;
    padding: 10px 14px 14px 14px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dynamic-list-group-legend {
    padding: 0 6px;
    font-weight: 600;
    color: var(--color-text-1);
}

.dynamic-list-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.dynamic-list-row-label {
    flex: 0 0 140px;
    text-align: left;
}

/* without a fixed width the control stretches - the fixed ones keep the numbers
   and dropdowns compact (the width itself is set in code) */
.dynamic-list-control-fixed {
    margin-right: auto;
}

.dynamic-list-control-grow {
    flex: 1;
}