/* App buttons — design system tokens */

.content a.button,
.content button.button,
.content input.button,
.content input[type="submit"],
.content input[type="button"],
.content button[type="submit"]:not(.dt-button):not(.ui-button),
.order-view-actions a.button,
.order-view-actions button,
.order-view-actions input[type="submit"],
.order-edit-actions a.button,
.order-edit-actions button,
.order-edit-actions input[type="submit"],
.order-form-actions a.button,
.order-form-actions button,
.order-form-actions input[type="submit"],
.login a.button,
.login button[type="submit"],
.login input[type="submit"],
.impersonation-banner-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: auto;
    min-height: var(--form-control-height);
    margin: 0;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-brand);
    border-radius: var(--radius-sm);
    background: var(--color-brand);
    color: var(--color-brand-on);
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    box-sizing: border-box;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.content a.button:hover,
.content a.button:focus,
.content button.button:hover,
.content button.button:focus,
.content input.button:hover,
.content input.button:focus,
.content input[type="submit"]:hover,
.content input[type="submit"]:focus,
.content input[type="button"]:hover,
.content input[type="button"]:focus,
.content button[type="submit"]:not(.dt-button):not(.ui-button):hover,
.content button[type="submit"]:not(.dt-button):not(.ui-button):focus,
.order-view-actions a.button:hover,
.order-view-actions a.button:focus,
.order-view-actions button:hover,
.order-view-actions button:focus,
.order-view-actions input[type="submit"]:hover,
.order-view-actions input[type="submit"]:focus,
.order-edit-actions a.button:hover,
.order-edit-actions a.button:focus,
.order-edit-actions button:hover,
.order-edit-actions button:focus,
.order-edit-actions input[type="submit"]:hover,
.order-edit-actions input[type="submit"]:focus,
.order-form-actions a.button:hover,
.order-form-actions a.button:focus,
.order-form-actions button:hover,
.order-form-actions button:focus,
.order-form-actions input[type="submit"]:hover,
.order-form-actions input[type="submit"]:focus,
.login a.button:hover,
.login a.button:focus,
.login button[type="submit"]:hover,
.login button[type="submit"]:focus,
.login input[type="submit"]:hover,
.login input[type="submit"]:focus,
.impersonation-banner-button:hover,
.impersonation-banner-button:focus {
    background: var(--color-brand-hover);
    border-color: var(--color-brand-hover);
    color: var(--color-brand-on);
}

/* Secondary / filter / reset actions */
.content a.button:not(.float-right),
.content button.button-secondary,
.content a.button-secondary,
.content a.button.button-outline,
.content a.button-outline,
.impersonation-banner .button-outline {
    background: var(--color-surface-card);
    border-color: var(--color-border-strong);
    color: var(--color-text-primary);
}

.content a.button:not(.float-right):hover,
.content a.button:not(.float-right):focus,
.content button.button-secondary:hover,
.content button.button-secondary:focus,
.content a.button-secondary:hover,
.content a.button-secondary:focus,
.content a.button.button-outline:hover,
.content a.button-outline:hover,
.impersonation-banner .button-outline:hover {
    background: var(--color-surface-zebra);
    border-color: var(--color-text-secondary);
    color: var(--color-text-primary);
}

/* Danger actions */
.content a.button-danger,
.content button.button-danger,
.content input.button-danger,
.order-view-actions a.button-danger,
.order-view-actions button.button-danger {
    background: var(--color-surface-card);
    border-color: #fca5a5;
    color: var(--color-danger);
}

.content a.button-danger:hover,
.content a.button-danger:focus,
.content button.button-danger:hover,
.content button.button-danger:focus,
.content input.button-danger:hover,
.content input.button-danger:focus,
.order-view-actions a.button-danger:hover,
.order-view-actions a.button-danger:focus,
.order-view-actions button.button-danger:hover,
.order-view-actions button.button-danger:focus {
    background: var(--color-danger-bg);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* Index page header actions */
.content > a.button.float-right,
.content > .button.float-right {
    margin-left: 0.5rem;
    margin-bottom: 0.75rem;
}

.content > h3:first-child,
.content > h3 {
    clear: both;
}

.content > h3 + .table-responsive,
.content > a.button.float-right + h3 {
    margin-top: 0;
}

/* Form submit row */
.content form button[type="submit"]:not(.dt-button):not(.ui-button),
.content form input[type="submit"] {
    margin-top: 0.5rem;
    margin-right: 0.5rem;
}

.content .button-lg,
.order-edit-actions .button-lg,
.order-form-actions .button-lg {
    min-height: 3rem;
    padding: 0.85rem 1.65rem;
    font-size: 1.125rem;
}

/* jQuery UI buttons inside content areas */
.content .ui-button,
.content button.ui-button,
.content a.ui-button {
    min-height: 2.5rem;
    padding: 0.65rem 1rem;
    font-size: 1.05rem;
    line-height: 1.2;
}

td.actions,
th.actions {
    white-space: nowrap;
}

td.actions {
    white-space: nowrap;
}

td.actions a,
td.actions form {
    display: inline-flex;
    vertical-align: middle;
    margin: 0 0.2rem 0.2rem 0;
}

td.actions a {
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface-card);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

td.actions a:hover,
td.actions a:focus {
    background: var(--color-surface-zebra);
    border-color: var(--color-text-secondary);
    color: var(--color-text-primary);
}

td.actions a.fa,
td.actions a[class*="fa-"] {
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    font-size: 1rem;
}

td.actions a.side-nav-icon,
td.actions .side-nav-icon {
    display: none;
}

/* Nav helper icons inside content buttons */
.content a.button .side-nav-icon,
.content button.button .side-nav-icon,
.order-view-actions a.button .side-nav-icon {
    font-size: 1rem;
    width: 1.1rem;
    text-align: center;
}

.content a.button .side-nav-label,
.content button.button .side-nav-label,
.order-view-actions a.button .side-nav-label {
    line-height: 1.2;
}

/* View page action bars */
.order-view-actions,
.page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.order-view-actions form,
.page-actions form {
    display: inline-flex;
    margin: 0;
}

@media (max-width: 640px) {
    .content a.button,
    .content button.button,
    .content input.button,
    .content input[type="submit"],
    .content button[type="submit"]:not(.dt-button):not(.ui-button) {
        width: 100%;
        justify-content: center;
    }

    .content > a.button.float-right,
    .content > .button.float-right {
        float: none;
        display: flex;
        width: 100%;
        margin-left: 0;
    }

    td.actions a,
    td.actions form {
        display: inline-flex;
        margin-bottom: 0.25rem;
    }

    .order-view-actions {
        justify-content: stretch;
    }

    .order-view-actions a.button,
    .order-view-actions form {
        width: 100%;
    }

    .order-view-actions form a.button,
    .order-view-actions form button,
    .order-view-actions form input[type="submit"] {
        width: 100%;
    }
}