/* Shared action styling: visible boundaries even before hover. */
:is(.theme-light, .theme-dark) .mud-button-root.mud-button,
.btn,
.office-content button:not([class*="mud-"]),
.eo-access button,
#eoffice-install button,
.security-card :is(button, .button) {
    border-radius: 9px;
    font-weight: 650;
    text-transform: none;
    letter-spacing: .01em;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}

:is(.theme-light, .theme-dark) .mud-button-root.mud-button {
    min-height: 40px;
    padding: 8px 16px;
    border: 1px solid transparent;
    box-shadow: 0 2px 4px #102e4014;
}

/* Text actions now read as buttons; retain their semantic primary/error colors. */
:is(.theme-light, .theme-dark) .mud-button-root.mud-button-text,
:is(.theme-light, .theme-dark) .mud-button-root.mud-button-outlined {
    border-color: currentColor;
    border-color: color-mix(in srgb, currentColor 45%, transparent);
    background: color-mix(in srgb, currentColor 9%, var(--mud-palette-surface));
}

:is(.theme-light, .theme-dark) .mud-button-root.mud-button-text-default,
:is(.theme-light, .theme-dark) .mud-button-root.mud-button-outlined-default {
    color: var(--mud-palette-text-primary);
}

.office-content .mud-button + .mud-button,
.office-content .btn + .btn { margin-inline-start: 8px; }

.office-content .mud-button-root.mud-button[class*="-size-small"] { min-height: 34px; padding: 5px 11px; }
.theme-dark .mud-button-root.mud-button-filled-primary { color: #132333; }
.btn { min-height: 40px; padding: 8px 16px; box-shadow: 0 2px 4px #102e4014; }
.office-content button:not([class*="mud-"]):not(.btn) {
    min-height: 38px;
    padding: 7px 13px;
    border: 1px solid var(--mud-palette-primary);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
}

/* Icon-only controls stay compact but gain a clear clickable surface. */
.office-appbar .mud-icon-button {
    border: 1px solid var(--mud-palette-lines-default);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, var(--mud-palette-surface));
    transition: transform .16s ease, background-color .16s ease;
}
.office-appbar .mud-icon-button + .mud-icon-button { margin-inline-start: 4px; }

@media (hover: hover) and (pointer: fine) {
    :is(.theme-light, .theme-dark) .mud-button-root.mud-button:not(:disabled):not([aria-disabled="true"]):hover,
    .btn:not(:disabled):not(.disabled):hover,
    .office-content button:not([class*="mud-"]):not(:disabled):hover,
    .eo-access button:not(:disabled):hover,
    #eoffice-install button:not(:disabled):hover,
    .security-card :is(button, .button):not(:disabled):hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 12px #102e402b;
    }
    :is(.theme-light, .theme-dark) .mud-button-root.mud-button-text:not(:disabled):hover,
    :is(.theme-light, .theme-dark) .mud-button-root.mud-button-outlined:not(:disabled):hover {
        background: color-mix(in srgb, currentColor 16%, var(--mud-palette-surface));
        border-color: currentColor;
    }
}

:is(.theme-light, .theme-dark) .mud-button-root.mud-button:not(:disabled):active,
.btn:not(:disabled):active,
.eo-access button:not(:disabled):active,
.security-card :is(button, .button):not(:disabled):active {
    transform: translateY(1px);
    box-shadow: none;
}

:is(.theme-light, .theme-dark) .mud-button-root:focus-visible,
.btn:focus-visible,
.office-content button:focus-visible,
.eo-access button:focus-visible,
#eoffice-install button:focus-visible,
.security-card :is(button, .button):focus-visible {
    outline: 3px solid #c79220;
    outline-offset: 3px;
}

:is(.theme-light, .theme-dark) .mud-button-root.mud-button:disabled,
:is(.theme-light, .theme-dark) .mud-button-root.mud-button[aria-disabled="true"] {
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-action-disabled);
    border-color: var(--mud-palette-lines-default);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* Stronger action colors across modules; error/warning buttons keep their intent. */
:is(.theme-light, .theme-dark) .office-content .mud-button-root:is(.mud-button-text-default, .mud-button-filled-default) {
    color: #fff;
    background: linear-gradient(135deg, #187350, #11533f);
    border: 1px solid #12523d;
    box-shadow: 0 3px 8px #145a3b30;
}
:is(.theme-light, .theme-dark) .office-content .mud-button-root:is(.mud-button-text-primary, .mud-button-filled-primary),
:is(.theme-light, .theme-dark) .office-content .mud-button-root[data-office-back] {
    color: #fff;
    background: linear-gradient(135deg, #245ad3, #2144a6);
    border: 1px solid #2348aa;
    box-shadow: 0 3px 9px #2144a633;
}
:is(.theme-light, .theme-dark) .office-content .mud-button-root.mud-button-outlined-default {
    color: #15533d;
    background: #e1f3e8;
    border: 1px solid #65a689;
}
.theme-dark .office-content .mud-button-root.mud-button-outlined-default {
    color: #d1f6e3;
    background: #23483a;
    border-color: #75b997;
}
@media (hover: hover) and (pointer: fine) {
    :is(.theme-light, .theme-dark) .office-content .mud-button-root:is(.mud-button-text-default, .mud-button-filled-default):not(:disabled):hover {
        color: #fff; background: linear-gradient(135deg, #21875e, #17634a);
    }
    :is(.theme-light, .theme-dark) .office-content .mud-button-root:is(.mud-button-text-primary, .mud-button-filled-primary, [data-office-back]):not(:disabled):hover {
        color: #fff; background: linear-gradient(135deg, #3069e5, #294fb8);
    }
}
:is(.theme-light, .theme-dark) .office-content .mud-button-root.mud-button:is(:disabled, [aria-disabled="true"]) {
    background: var(--mud-palette-action-disabled-background);
    color: var(--mud-palette-action-disabled);
    border-color: var(--mud-palette-lines-default);
    box-shadow: none;
}

/* Honor both the OS motion setting and the login page's Pause motion control. */
.motion-paused button { transition: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
    .mud-button-root, .btn, button, .security-card .button {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}
