/*
 * DataTables Responsive (responsive_table_controller.js): behaviour only, shared by every skin.
 * Colours, sizes and fonts belong to each theme.
 */
/*
 * No rule for .dtr-hidden on purpose: Responsive hides cells with an inline display:none, and measures
 * columns on a clone where it clears that inline style. A `.dtr-hidden { display: none !important }` rule
 * kept them hidden in the clone (0px wide), so a hidden column always "fitted", was shown, did not fit,
 * was hidden again... -> endless column-sizing loop (Maximum call stack size exceeded).
 */

/*
 * Bootstrap grid classes on cells (Sonata header_class such as col-sm-1) give percentage widths of the
 * whole table, which no longer make sense once Responsive hides columns: let it size them.
 */
table.dataTable > thead > tr > [class*="col-"],
table.dataTable > tbody > tr > [class*="col-"],
table.dataTable > tfoot > tr > [class*="col-"] {
    float: none;
    width: auto;
}

/*
 * Expand button injected by the controller (a .btn-sm of each skin): only shown while some columns
 * are hidden
 */
table.dataTable button.dtr-toggle {
    display: none;
    margin-right: .5em;
    vertical-align: middle;
}

table.dataTable.collapsed button.dtr-toggle {
    display: inline-block;
    margin: 10px 6px 10px 0;
}

/* The caret follows the row state set by Responsive: down = collapsed, up = expanded */
table.dataTable button.dtr-toggle > .fa {
    transition: transform .15s ease;
}

table.dataTable tr.dtr-expanded button.dtr-toggle > .fa {
    transform: rotate(180deg);
}

/* Child row: one "Title: value" line per hidden column */
table.dataTable > tbody > tr.child ul.dtr-details {
    list-style: none;
    margin: 0;
    padding: 0;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
    padding: .35em 0;
}

table.dataTable > tbody > tr.child span.dtr-title {
    display: inline-block;
    min-width: 8em;
    margin-right: .5em;
}

/*
 * Action button groups never wrap inside a responsive table: otherwise Responsive measures the
 * column as one button wide, keeps it, and the buttons pile up vertically in tall rows
 */
table.dataTable > tbody > tr > td > .btn-group {
    display: inline-flex;
    flex-wrap: nowrap;
}

table.dataTable > tbody > tr > td > .btn-group > .btn {
    float: none;
}