/*!
 * datatable-actions.css — row action cells of datatables
 *
 * Action cells are built by action_dropdown() in app/Http/helpers.php: a single
 * action renders as a plain button, two or more are wrapped in the "Actions"
 * dropdown the sales table has always used.
 *
 * Bootstrap 3 (public/css/vendor.css) only styles `.dropdown-menu > li > a`, but
 * plenty of row actions are <button> elements — deletes and modal openers bind
 * their JS to a button. These rules give those buttons the same box as a menu
 * link so a mixed dropdown lines up. Loaded after vendor.css and bs3-compat.css
 * in resources/views/include/head.blade.php so it wins the cascade.
 */

.dropdown-menu > li > button {
    display: block;
    width: 100%;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    text-align: left;
    white-space: nowrap;
    background: none;
    border: 0;
}

.dropdown-menu > li > button:focus,
.dropdown-menu > li > button:hover {
    color: #262626;
    text-decoration: none;
    background-color: #f5f5f5;
}

/* Delete row actions carry `btn btn-xs btn-danger` in their markup, because
 * action_button_markup() otherwise paints a lone action btn-primary — a blue
 * Delete button. That class only makes sense in the standalone case: dropped
 * into the Actions menu it would be a solid red block in a list of plain links.
 * Flatten it back to a normal menu row that happens to be red. */
.dropdown-menu > li > .btn-danger,
.dropdown-menu > li > .btn-danger:focus,
.dropdown-menu > li > .btn-danger:hover {
    display: block;
    width: 100%;
    padding: 3px 20px;
    clear: both;
    font-size: inherit;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: left;
    white-space: nowrap;
    background: none;
    background-image: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #c9302c !important;
}

.dropdown-menu > li > .btn-danger:focus,
.dropdown-menu > li > .btn-danger:hover {
    background-color: #f5f5f5;
    color: #a02622 !important;
    text-decoration: none;
}

/* The action cell is the narrowest column in most tables; keep a single action
 * and the dropdown toggle from wrapping onto a second line. */
td .btn-group > .dropdown-toggle,
td > .btn-group > .btn {
    white-space: nowrap;
}


/* Action cells inside the payment modals (transaction_payment/show_payments.blade.php and
 * friends) hold a loose row of icon buttons rather than a dropdown. They were laid out with
 * `display: flex` on the <td> itself, which made the buttons stretch to the row height and
 * overflow the column on narrow modals. Keep the cell a normal table cell and let this inner
 * wrapper do the flexing, so the buttons stay their own size and wrap onto a second line. */
.payment-actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

/* Icon-only buttons: a fixed square keeps edit/delete/view/download the same size whatever
 * glyph they carry, so the row reads as one control group. */
.payment-actions > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    margin: 0;
    padding: 0 6px;
    line-height: 1;
}

td .btn-group > .btn.dropdown-toggle.btn-info:not(:disabled):not(.disabled),
td > .btn.btn-xs.btn-primary:not(:disabled):not(.disabled),
td > .btn.btn-xs.btn-info:not(:disabled):not(.disabled),
.payment-actions > .btn.btn-xs.btn-primary:not(:disabled):not(.disabled),
.payment-actions > .btn.btn-xs.btn-info:not(:disabled):not(.disabled) {
    background-color: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
}

td .btn-group > .btn.dropdown-toggle.btn-info:not(:disabled):not(.disabled):hover,
td .btn-group > .btn.dropdown-toggle.btn-info:not(:disabled):not(.disabled):focus,
td .btn-group > .btn.dropdown-toggle.btn-info:not(:disabled):not(.disabled):active,
td .btn-group.open > .btn.dropdown-toggle.btn-info:not(:disabled):not(.disabled),
td .btn-group.open > .btn.dropdown-toggle.btn-info:not(:disabled):not(.disabled):hover,
td .btn-group.open > .btn.dropdown-toggle.btn-info:not(:disabled):not(.disabled):focus,
td > .btn.btn-xs.btn-primary:not(:disabled):not(.disabled):hover,
td > .btn.btn-xs.btn-primary:not(:disabled):not(.disabled):focus,
td > .btn.btn-xs.btn-primary:not(:disabled):not(.disabled):active,
td > .btn.btn-xs.btn-info:not(:disabled):not(.disabled):hover,
td > .btn.btn-xs.btn-info:not(:disabled):not(.disabled):focus,
td > .btn.btn-xs.btn-info:not(:disabled):not(.disabled):active,
.payment-actions > .btn.btn-xs.btn-primary:not(:disabled):not(.disabled):hover,
.payment-actions > .btn.btn-xs.btn-primary:not(:disabled):not(.disabled):focus,
.payment-actions > .btn.btn-xs.btn-primary:not(:disabled):not(.disabled):active,
.payment-actions > .btn.btn-xs.btn-info:not(:disabled):not(.disabled):hover,
.payment-actions > .btn.btn-xs.btn-info:not(:disabled):not(.disabled):focus,
.payment-actions > .btn.btn-xs.btn-info:not(:disabled):not(.disabled):active {
    background-color: var(--main-color);
    background-image: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
    border-color: var(--main-color);
    color: #fff;
}