/* Shared application buttons */

:root {
    --btn-app-primary-bg: var(--theme-primary);
    --btn-app-primary-border: var(--theme-primary);
    --btn-app-primary-text: var(--colour-surface);
    --btn-app-primary-hover-bg: var(--theme-primary-hover);
    --btn-app-primary-active-bg: var(--theme-primary-hover);
    --btn-app-secondary-bg: var(--colour-surface);
    --btn-app-secondary-border: var(--colour-border);
    --btn-app-secondary-text: var(--colour-text);
    --btn-app-secondary-hover-bg: var(--theme-light);
    --btn-app-secondary-hover-border: var(--theme-primary);
    --btn-app-secondary-hover-text: var(--theme-primary);
    --btn-app-neutral-bg: #f3f4f6;
    --btn-app-neutral-border: #d1d5db;
    --btn-app-neutral-text: var(--colour-text-secondary);
    --btn-app-neutral-hover-bg: #e5e7eb;
    --btn-app-neutral-hover-border: #9ca3af;
    --btn-app-danger-bg: var(--colour-destructive);
    --btn-app-danger-border: var(--colour-destructive);
    --btn-app-danger-text: var(--colour-surface);
    --btn-app-danger-hover-bg: #941b13;
    --btn-app-success-bg: var(--colour-primary-green);
    --btn-app-success-border: var(--colour-primary-green);
    --btn-app-success-text: var(--colour-surface);
    --btn-app-success-hover-bg: var(--colour-primary-green-hover);
    --btn-app-warning-bg: var(--colour-warning);
    --btn-app-warning-border: var(--colour-warning);
    --btn-app-warning-text: #3d2b00;
    --btn-app-warning-hover-bg: #9a6319;
    --btn-app-info-bg: var(--colour-primary-blue);
    --btn-app-info-border: var(--colour-primary-blue);
    --btn-app-info-text: var(--colour-surface);
    --btn-app-info-hover-bg: var(--colour-primary-blue-hover);
    --btn-app-info-light: var(--colour-light-blue);
    --btn-app-ghost-bg: transparent;
    --btn-app-ghost-border: transparent;
    --btn-app-ghost-text: var(--colour-text-secondary);
    --btn-app-focus: var(--theme-focus);
}

.btn-app {
    align-items: center;
    appearance: none;
    border: 1px solid var(--btn-app-border, var(--btn-app-secondary-border));
    border-radius: var(--control-radius);
    box-shadow: none;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    font-size: var(--font-size-button);
    font-weight: var(--font-weight-strong);
    gap: 0.35rem;
    justify-content: center;
    line-height: 1.35;
    min-height: var(--control-height);
    padding: 0.45rem 0.85rem;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease, transform 0.08s ease;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
}

.btn-app > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-app:hover {
    background: var(--btn-app-hover-bg, var(--btn-app-secondary-hover-bg));
    border-color: var(--btn-app-hover-border, var(--btn-app-border, var(--btn-app-secondary-border)));
    color: var(--btn-app-hover-text, var(--btn-app-text, var(--btn-app-secondary-text)));
    text-decoration: none;
}

.btn-app:active,
.btn-app.active {
    background: var(--btn-app-active-bg, var(--btn-app-hover-bg, var(--btn-app-secondary-hover-bg)));
    border-color: var(--btn-app-active-border, var(--btn-app-hover-border, var(--btn-app-border, var(--btn-app-secondary-border))));
    color: var(--btn-app-active-text, var(--btn-app-hover-text, var(--btn-app-text, var(--btn-app-secondary-text))));
    transform: translateY(1px);
}

.btn-app:focus {
    box-shadow: none;
}

.btn-app:focus-visible {
    box-shadow: 0 0 0 0.12rem var(--colour-surface), 0 0 0 0.32rem var(--btn-app-focus);
    outline: 0;
}

.btn-app:disabled,
.btn-app.disabled,
fieldset:disabled .btn-app {
    cursor: not-allowed;
    opacity: 0.58;
    pointer-events: none;
    transform: none;
}

.btn-app[aria-busy="true"],
.btn-app-loading {
    cursor: progress;
    opacity: 0.78;
    pointer-events: none;
    position: relative;
}

.btn-app-fill,
.btn-app-primary,
.btn-app-save,
.btn-app-upload {
    --btn-app-bg: var(--btn-app-primary-bg);
    --btn-app-border: var(--btn-app-primary-border);
    --btn-app-text: var(--btn-app-primary-text);
    --btn-app-hover-bg: var(--btn-app-primary-hover-bg);
    --btn-app-hover-border: var(--btn-app-primary-hover-bg);
    --btn-app-active-bg: var(--btn-app-primary-active-bg);
    --btn-app-active-border: var(--btn-app-primary-active-bg);
    background: var(--btn-app-bg);
    color: var(--btn-app-text);
}

.btn-app-patient-primary {
    --btn-app-bg: var(--colour-primary-blue);
    --btn-app-border: var(--colour-primary-blue);
    --btn-app-text: var(--colour-surface);
    --btn-app-hover-bg: var(--colour-primary-blue-hover);
    --btn-app-hover-border: var(--colour-primary-blue-hover);
    --btn-app-active-bg: var(--colour-primary-blue-hover);
    --btn-app-active-border: var(--colour-primary-blue-hover);
    background: var(--btn-app-bg);
    color: var(--btn-app-text);
}

.btn-app-clinic-primary {
    --btn-app-bg: var(--colour-primary-green);
    --btn-app-border: var(--colour-primary-green);
    --btn-app-text: var(--colour-surface);
    --btn-app-hover-bg: var(--colour-primary-green-hover);
    --btn-app-hover-border: var(--colour-primary-green-hover);
    --btn-app-active-bg: var(--colour-primary-green-hover);
    --btn-app-active-border: var(--colour-primary-green-hover);
    background: var(--btn-app-bg);
    color: var(--btn-app-text);
}

.btn-app-patient-outline {
    --btn-app-bg: var(--colour-surface);
    --btn-app-border: var(--colour-primary-blue);
    --btn-app-text: var(--colour-primary-blue);
    --btn-app-hover-bg: var(--colour-light-blue-strong);
    --btn-app-hover-border: var(--colour-primary-blue-hover);
    --btn-app-hover-text: var(--colour-primary-blue-hover);
    --btn-app-active-bg: var(--colour-light-blue-strong);
    --btn-app-active-border: var(--colour-primary-blue-hover);
    --btn-app-active-text: var(--colour-primary-blue-hover);
    background: var(--btn-app-bg);
    color: var(--btn-app-text);
}

.btn-app-clinic-outline {
    --btn-app-bg: var(--colour-surface);
    --btn-app-border: var(--colour-primary-green);
    --btn-app-text: var(--colour-primary-green);
    --btn-app-hover-bg: var(--colour-light-green);
    --btn-app-hover-border: var(--colour-primary-green-hover);
    --btn-app-hover-text: var(--colour-primary-green-hover);
    --btn-app-active-bg: var(--colour-light-green);
    --btn-app-active-border: var(--colour-primary-green-hover);
    --btn-app-active-text: var(--colour-primary-green-hover);
    background: var(--btn-app-bg);
    color: var(--btn-app-text);
}

.btn-app-outline,
.btn-app-secondary,
.btn-app-cancel,
.btn-app-back {
    --btn-app-bg: var(--btn-app-secondary-bg);
    --btn-app-border: var(--btn-app-secondary-border);
    --btn-app-text: var(--btn-app-secondary-text);
    --btn-app-hover-bg: var(--btn-app-secondary-hover-bg);
    --btn-app-hover-border: var(--btn-app-secondary-hover-border);
    --btn-app-hover-text: var(--btn-app-secondary-hover-text);
    --btn-app-active-bg: var(--btn-app-secondary-hover-bg);
    --btn-app-active-border: var(--btn-app-secondary-hover-border);
    --btn-app-active-text: var(--btn-app-secondary-hover-text);
    background: var(--btn-app-bg);
    color: var(--btn-app-text);
}

.btn-app-neutral,
.btn-app-grey {
    --btn-app-bg: var(--btn-app-neutral-bg);
    --btn-app-border: var(--btn-app-neutral-border);
    --btn-app-text: var(--btn-app-neutral-text);
    --btn-app-hover-bg: var(--btn-app-neutral-hover-bg);
    --btn-app-hover-border: var(--btn-app-neutral-hover-border);
    --btn-app-hover-text: var(--btn-app-neutral-text);
    --btn-app-active-bg: var(--btn-app-neutral-hover-bg);
    --btn-app-active-border: var(--btn-app-neutral-hover-border);
    --btn-app-active-text: var(--btn-app-neutral-text);
    background: var(--btn-app-bg);
    color: var(--btn-app-text);
}

.btn-app-neutral-outline,
.btn-app-grey-outline {
    --btn-app-bg: var(--colour-surface);
    --btn-app-border: var(--btn-app-neutral-border);
    --btn-app-text: var(--btn-app-neutral-text);
    --btn-app-hover-bg: var(--btn-app-neutral-bg);
    --btn-app-hover-border: var(--btn-app-neutral-hover-border);
    --btn-app-hover-text: var(--btn-app-neutral-text);
    --btn-app-active-bg: var(--btn-app-neutral-bg);
    --btn-app-active-border: var(--btn-app-neutral-hover-border);
    --btn-app-active-text: var(--btn-app-neutral-text);
    background: var(--btn-app-bg);
    color: var(--btn-app-text);
}

.btn-app-danger,
.btn-app-delete,
.btn-app-disable {
    --btn-app-bg: transparent;
    --btn-app-border: var(--btn-app-danger-border);
    --btn-app-text: var(--btn-app-danger-bg);
    --btn-app-hover-bg: var(--colour-destructive-light);
    --btn-app-hover-border: var(--btn-app-danger-hover-bg);
    --btn-app-hover-text: #941b13;
    --btn-app-active-bg: #f9d2d0;
    --btn-app-active-border: #7a160f;
    background: var(--btn-app-bg);
    color: var(--btn-app-text);
}

.btn-app-emergency-outline {
    --btn-app-bg: var(--colour-surface);
    --btn-app-border: var(--colour-destructive);
    --btn-app-text: var(--colour-destructive);
    --btn-app-hover-bg: color-mix(in srgb, var(--colour-destructive) 12%, var(--colour-surface));
    --btn-app-hover-border: var(--colour-destructive);
    --btn-app-hover-text: var(--colour-destructive);
    --btn-app-active-bg: var(--colour-destructive);
    --btn-app-active-border: var(--colour-destructive);
    --btn-app-active-text: var(--colour-surface);
    background: var(--btn-app-bg);
    color: var(--btn-app-text);
}

.btn-app-success,
.btn-app-enable {
    --btn-app-bg: transparent;
    --btn-app-border: var(--btn-app-success-border);
    --btn-app-text: var(--btn-app-success-bg);
    --btn-app-hover-bg: var(--colour-light-green);
    --btn-app-hover-border: var(--btn-app-success-hover-bg);
    --btn-app-hover-text: #276f4b;
    --btn-app-active-bg: #d5eadc;
    --btn-app-active-border: #205b3e;
    background: var(--btn-app-bg);
    color: var(--btn-app-text);
}

.btn-app-warning {
    --btn-app-bg: var(--btn-app-warning-bg);
    --btn-app-border: var(--btn-app-warning-border);
    --btn-app-text: var(--btn-app-warning-text);
    --btn-app-hover-bg: var(--btn-app-warning-hover-bg);
    --btn-app-active-bg: #d99f17;
    background: var(--btn-app-bg);
    color: var(--btn-app-text);
}

.btn-app-warning-outline,
.btn-app-archive {
    --btn-app-bg: transparent;
    --btn-app-border: var(--btn-app-warning-border);
    --btn-app-text: #9a6319;
    --btn-app-hover-bg: #fff3cd;
    --btn-app-hover-border: var(--btn-app-warning-hover-bg);
    --btn-app-hover-text: #7a4d12;
    --btn-app-active-bg: #ffe8a1;
    --btn-app-active-border: #7a4d12;
    background: var(--btn-app-bg);
    color: var(--btn-app-text);
}

.btn-app-info {
    --btn-app-bg: var(--btn-app-info-bg);
    --btn-app-border: var(--btn-app-info-border);
    --btn-app-text: var(--btn-app-info-text);
    --btn-app-hover-bg: var(--btn-app-info-hover-bg);
    --btn-app-hover-border: var(--btn-app-info-hover-bg);
    --btn-app-active-bg: var(--btn-app-info-hover-bg);
    --btn-app-active-border: var(--btn-app-info-hover-bg);
    background: var(--btn-app-bg);
    color: var(--btn-app-text);
}

.btn-app-info-outline {
    --btn-app-bg: var(--colour-surface);
    --btn-app-border: var(--btn-app-info-border);
    --btn-app-text: var(--btn-app-info-bg);
    --btn-app-hover-bg: var(--btn-app-info-light);
    --btn-app-hover-border: var(--btn-app-info-hover-bg);
    --btn-app-hover-text: var(--btn-app-info-hover-bg);
    --btn-app-active-bg: var(--btn-app-info-light);
    --btn-app-active-border: var(--btn-app-info-hover-bg);
    --btn-app-active-text: var(--btn-app-info-hover-bg);
    background: var(--btn-app-bg);
    color: var(--btn-app-text);
}

.btn-app-edit {
    --btn-app-bg: transparent;
    --btn-app-border: var(--btn-app-secondary-border);
    --btn-app-text: var(--colour-text);
    --btn-app-hover-bg: var(--btn-app-secondary-hover-bg);
    --btn-app-hover-border: var(--btn-app-secondary-hover-border);
    --btn-app-hover-text: var(--btn-app-secondary-hover-text);
    --btn-app-active-bg: var(--btn-app-secondary-hover-bg);
    --btn-app-active-border: var(--btn-app-secondary-hover-border);
    --btn-app-active-text: var(--btn-app-secondary-hover-text);
    background: var(--btn-app-bg);
    color: var(--btn-app-text);
}

.btn-app-ghost {
    --btn-app-bg: var(--btn-app-ghost-bg);
    --btn-app-border: var(--btn-app-ghost-border);
    --btn-app-text: var(--btn-app-ghost-text);
    --btn-app-hover-bg: var(--theme-light);
    background: var(--btn-app-bg);
    color: var(--btn-app-text);
}

.btn-app-sm {
    font-size: var(--font-size-small);
    min-height: var(--control-height-sm);
    padding: 0.34rem 0.68rem;
}

.btn-app-lg {
    font-size: 1rem;
    min-height: 2.9rem;
    padding: 0.6rem 1rem;
}

.btn-app-icon {
    flex: 0 0 auto;
    min-height: 2.25rem;
    padding: 0;
    width: 2.25rem;
}

.clinic-admin-actions .btn-app:not(.clinic-guide-action-menu-toggle):not(.row-details-toggle),
.clinic-info-actions .btn-app,
.clinic-patient-toolbar .btn-app,
.clinic-patient-filter-actions .btn-app,
.generic-modal-footer .btn-app {
    flex: 0 0 auto;
}

.admin-page-back .btn-app {
    --btn-app-bg: transparent;
    --btn-app-border: transparent;
    --btn-app-hover-bg: transparent;
    --btn-app-hover-border: transparent;
    --btn-app-active-bg: transparent;
    --btn-app-active-border: transparent;
    background: transparent;
    border-color: transparent;
    gap: 0.45rem;
    min-height: auto;
    padding: 0.3rem 0;
}

.admin-page-back .btn-app:active {
    transform: none;
}

.admin-page-back .btn-app > i {
    transition: transform 0.18s ease;
}

.admin-page-back .btn-app:hover > i,
.admin-page-back .btn-app:focus-visible > i {
    transform: translateX(-0.2rem);
}

@media (max-width: 520px) {
    .clinic-admin-actions,
    .clinic-info-actions,
    .clinic-patient-toolbar,
    .clinic-patient-filter-actions,
    .generic-modal-footer {
        align-items: stretch;
    }

    .clinic-admin-actions .btn-app:not(.clinic-guide-action-menu-toggle):not(.row-details-toggle),
    .clinic-info-actions .btn-app,
    .clinic-patient-toolbar .btn-app,
    .clinic-patient-filter-actions .btn-app,
    .generic-modal-footer .btn-app {
        flex: 1 1 100%;
        width: 100%;
    }
}

.btn-app-icon.btn-app-sm {
    min-height: 2rem;
    width: 2rem;
}

.generic-modal-footer > .btn-app.confirm-dialog-action {
    flex: 0 0 auto;
    min-width: max-content;
    padding: 0.34rem 0.68rem;
    width: auto;
}

@media (max-width: 520px) {
    .generic-modal-footer > .btn-app.confirm-dialog-action {
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
    }
}

.btn-app i {
    color: inherit;
    flex: 0 0 auto;
    line-height: 1;
}

.btn-app-wide {
    min-width: 130px;
}

.btn-app-block {
    width: 100%;
}

/* Compatibility for option values and framework-owned reconnect buttons. */
.btn.btn-primary,
.btn.btn-success,
.btn.btn-danger,
.btn.btn-outline-primary,
.btn.btn-outline-secondary,
.btn.btn-outline-success,
.btn.btn-outline-danger {
    align-items: center;
    display: inline-flex;
    gap: 0.35rem;
    justify-content: center;
}

.btn.btn-primary {
    background-color: var(--btn-app-primary-bg);
    border-color: var(--btn-app-primary-border);
}

.btn.btn-success {
    background-color: transparent;
    border-color: var(--btn-app-success-border);
    color: var(--btn-app-success-bg);
}

.btn.btn-danger {
    background-color: transparent;
    border-color: var(--btn-app-danger-border);
    color: var(--btn-app-danger-bg);
}

.btn.btn-outline-primary {
    border-color: var(--btn-app-secondary-border);
    color: var(--btn-app-secondary-text);
}

.btn.btn-outline-primary:hover,
.btn.btn-outline-secondary:hover {
    background-color: var(--btn-app-secondary-hover-bg);
    border-color: var(--btn-app-secondary-hover-border);
    color: var(--btn-app-secondary-hover-text);
}

.btn.btn-outline-success {
    border-color: var(--btn-app-success-border);
    color: var(--btn-app-success-bg);
}

.btn.btn-outline-success:hover {
    background-color: var(--btn-app-success-bg);
    border-color: var(--btn-app-success-border);
    color: var(--btn-app-success-text);
}

.btn.btn-outline-danger {
    border-color: var(--btn-app-danger-border);
    color: var(--btn-app-danger-bg);
}

.btn.btn-outline-danger:hover {
    background-color: var(--btn-app-danger-bg);
    border-color: var(--btn-app-danger-border);
    color: var(--btn-app-danger-text);
}