/* DocAsist button system
 * Primary: create/save/update, Secondary: cancel/back, Danger: destructive.
 * All actions use the Bootstrap small-button scale for a consistent UI.
 */
:root {
    --da-action-primary: #405189;
    --da-action-primary-hover: #364574;
    --da-action-danger: #d63b3b;
    --da-action-danger-hover: #b92f2f;
    --da-action-height: 32px;
    --da-action-compact-height: 32px;
    --da-action-radius: 6px;
}

.btn[data-app-action],
.btn.app-action,
.btn[class*="btn-outline-"] {
    min-height: var(--da-action-height);
    height: var(--da-action-height);
    padding: .25rem .5rem;
    border-radius: var(--da-action-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.btn[data-app-action] > :is(i, svg),
.btn.app-action > :is(i, svg),
.btn[class*="btn-outline-"] > :is(i, svg) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
    vertical-align: middle;
}

.btn[data-app-action="primary"],
.btn.app-action--primary {
    color: #fff !important;
    background: var(--da-action-primary) !important;
    border-color: var(--da-action-primary) !important;
}

.btn[data-app-action="primary"]:hover,
.btn.app-action--primary:hover,
.btn[data-app-action="primary"]:focus-visible,
.btn.app-action--primary:focus-visible {
    color: #fff !important;
    background: var(--da-action-primary-hover) !important;
    border-color: var(--da-action-primary-hover) !important;
}

.btn[data-app-action="secondary"],
.btn.app-action--secondary {
    color: var(--vz-body-color) !important;
    background: var(--vz-light) !important;
    border-color: var(--vz-border-color) !important;
}

.btn[data-app-action="danger"],
.btn.app-action--danger {
    color: #fff !important;
    background: var(--da-action-danger) !important;
    border-color: var(--da-action-danger) !important;
}

.btn[data-app-action="danger"]:hover,
.btn.app-action--danger:hover {
    background: var(--da-action-danger-hover) !important;
    border-color: var(--da-action-danger-hover) !important;
}

.btn[data-app-action="export"],
.btn.app-action--export {
    color: var(--da-action-danger) !important;
    background: transparent !important;
    border-color: var(--da-action-danger) !important;
}

.btn[data-app-compact="true"],
.btn.app-action--compact,
.btn[class*="btn-outline-"].btn-sm,
.app-compact-actions .btn[class*="btn-outline-"] {
    min-height: var(--da-action-compact-height);
    height: var(--da-action-compact-height);
    padding: .3rem .55rem;
    font-size: .8125rem;
}

.btn.app-action--icon {
    width: var(--da-action-compact-height);
    min-width: var(--da-action-compact-height);
    padding: 0;
}

.btn[data-app-action]:focus-visible,
.btn.app-action:focus-visible {
    outline: 3px solid rgba(64, 81, 137, .24) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

@media (max-width: 575.98px) {
    .app-action-bar > .btn[data-app-action],
    .app-action-bar > .btn.app-action {
        flex: 1 1 auto;
    }
}