/* An inline formset table that doesn't fit the available width reflows
 * into stacked cards (one per row, fields stacked label-over-value)
 * instead of forcing horizontal scroll to reach columns like "Delete?".
 * responsive_inline_tables.js decides, per table, whether it needs this
 * and toggles the "rows-stacked" class -- this file only supplies the
 * layout for that state. No columns are ever hidden or dropped; every
 * field a table normally shows is still shown, just stacked instead of
 * side-by-side.
 */

.inline-group table.rows-stacked,
.inline-group table.rows-stacked tbody,
.inline-group table.rows-stacked tr.form-row,
.inline-group table.rows-stacked tr.add-row,
.inline-group table.rows-stacked td {
    display: block;
    width: auto;
}

.inline-group table.rows-stacked thead {
    display: none;
}

.inline-group table.rows-stacked tbody tr.form-row {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 8px;
}

.inline-group table.rows-stacked tbody tr.form-row.empty-form {
    display: none;
}

.inline-group table.rows-stacked td {
    border: none;
    padding: 4px 0;
    /* Establishes a new block-formatting context, so a floated child --
     * `.related-widget-wrapper-link` (the pencil/+/x/eye icons Django
     * renders next to every FK dropdown) floats left and is never
     * cleared -- stays contained inside this cell instead of escaping
     * into, and visually overlapping, the next stacked field. */
    overflow: hidden;
}

/* Hidden id/parent-fk inputs -- nothing in here is ever meant to be seen. */
.inline-group table.rows-stacked td.original {
    display: none;
}

.inline-group table.rows-stacked td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: bold;
    font-size: 11px;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 2px;
}

.inline-group table.rows-stacked td select,
.inline-group table.rows-stacked td textarea,
.inline-group table.rows-stacked td input[type="text"] {
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
}