/* Opt-in business controls, independent of Viho's semantic colour classes. */
html[data-pgbe-actions] {
    --action-primary: #24695c;
    --action-primary-hover: #195347;
    --action-surface: #fff;
    --action-text: #233446;
    --action-border: #758394;
    --action-hover: #edf3f2;
    --action-danger: #b42336;
    --action-focus: #167a9b;
}
html[data-pgbe-actions] body.dark-only {
    --action-surface: #182535;
    --action-text: #edf3fa;
    --action-border: #7c8da3;
    --action-hover: #293c4d;
    --action-danger: #ff8996;
    --action-focus: #7ed4e5;
}
html[data-pgbe-actions] .pgbe-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid var(--action-border);
    border-color: var(--action-border) !important;
    border-radius: 6px;
    /* Viho's deeply nested DataTables rules and semantic colours otherwise win. */
    background: var(--action-surface) !important;
    color: var(--action-text) !important;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: normal;
    cursor: pointer;
    box-shadow: none;
    vertical-align: middle;
}
html[data-pgbe-actions] .pgbe-button:hover { background: var(--action-hover) !important; color: var(--action-text) !important; }
html[data-pgbe-actions] .pgbe-button:is(.btn-primary, .btn-success, .pgbe-main-action):not(.pgbe-row-button):not(.pgbe-menu-item),
html[data-pgbe-actions] .pgbe-button.pgbe-main-action {
    color: #fff !important;
    background: var(--action-primary) !important;
    border-color: var(--action-primary) !important;
}
html[data-pgbe-actions] .pgbe-button:is(.btn-primary, .btn-success, .pgbe-main-action):not(.pgbe-row-button):not(.pgbe-menu-item):hover,
html[data-pgbe-actions] .pgbe-button.pgbe-main-action:hover { background: var(--action-primary-hover) !important; }
html[data-pgbe-actions] .pgbe-button:is(.btn-danger, .btn-outline-danger, .pgbe-danger-action) { color: var(--action-danger) !important; border-color: currentColor !important; }
html[data-pgbe-actions] .pgbe-button.btn-danger:not(.pgbe-row-button):not(.pgbe-menu-item) { background: #b42336 !important; border-color: #b42336 !important; color: #fff !important; }
html[data-pgbe-actions] .pgbe-button:focus-visible { outline: 3px solid var(--action-focus); outline-offset: 3px; }
html[data-pgbe-actions] .pgbe-button:disabled,
html[data-pgbe-actions] .pgbe-button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
html[data-pgbe-actions] .pgbe-button[hidden] { display: none !important; }
html[data-pgbe-actions] .pgbe-button :is(i, svg) { flex-shrink: 0; font-size: 16px; width: 16px; height: 16px; margin: 0; }
.pgbe-row-actions { display: inline-flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: nowrap; width: max-content; max-width: none; }
.pgbe-row-actions > .pgbe-button { white-space: nowrap; }
.pgbe-action-menu {
    z-index: 1080;
    width: max-content;
    min-width: 210px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    padding: 6px;
    background: var(--action-surface);
    color: var(--action-text);
    border: 1px solid var(--action-border);
    border-radius: 6px;
    box-shadow: 0 8px 24px #0003;
}
.pgbe-action-menu[hidden] { display: none !important; }
html[data-pgbe-actions] .pgbe-action-menu .pgbe-menu-item {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: 4px;
    background: transparent !important;
    color: var(--action-text) !important;
    white-space: normal;
}
html[data-pgbe-actions] .pgbe-action-menu .pgbe-menu-item:hover { background: var(--action-hover) !important; }
html[data-pgbe-actions] .pgbe-action-menu .pgbe-danger-action { color: var(--action-danger) !important; }
.pgbe-action-divider { border-top: 1px solid var(--action-border); margin: 6px 4px; opacity: .5; }
html[data-pgbe-actions] .pgbe-button.n-btn { width: auto; height: auto; opacity: 1; }
html[data-pgbe-actions] .n-actions { gap: 8px; flex-wrap: wrap; }
/* Header actions must wrap before squeezing the page title or overflowing the card. */
html[data-pgbe-actions] .card-header.d-flex { flex-wrap: wrap; gap: 16px; }
html[data-pgbe-actions] .card-header.d-flex > div:first-child:not(.d-flex) { flex: 1 1 240px; min-width: 0; }
html[data-pgbe-actions] .card-header.d-flex > .d-flex { flex-wrap: wrap; flex-shrink: 1 !important; max-width: 100%; gap: 8px; }
html[data-pgbe-actions] .card-header [data-pgbe-help],
html[data-pgbe-actions] .card-header [data-pgbe-tour] { min-height: 40px; align-items: center; }
html[data-pgbe-actions] .card-header > .pgbe-header-help { flex-basis: 100%; }
@media (pointer: coarse) { html[data-pgbe-actions] .pgbe-button, html[data-pgbe-actions] .pgbe-action-menu .pgbe-menu-item { min-height: 44px; min-width: 44px; } }
@media (max-width: 767px) {
    html[data-pgbe-actions] .card-header > .d-flex { flex-wrap: wrap; }
    html[data-pgbe-actions] .modal-footer { gap: 8px; }
    html[data-pgbe-actions] #appraisal-action-bar { flex-wrap: wrap; gap: 12px; }
    html[data-pgbe-actions] #appraisal-action-bar > .d-flex { flex-wrap: wrap; }
    html[data-pgbe-actions] .n-item { flex-wrap: wrap; }
    html[data-pgbe-actions] .n-actions { margin-left: auto; }
    html[data-pgbe-actions] .dtr-details { width: 100%; }
    html[data-pgbe-actions] .dtr-details .dtr-data { display: block; max-width: 100%; }
    html[data-pgbe-actions] .dtr-details .pgbe-row-actions { flex-wrap: wrap; width: auto; max-width: 100%; justify-content: flex-start; }
}