/* Shared action component for public pages, workspaces, admin and dialogs.
   Feature styles own placement; this file owns button appearance and states.
   Loaded directly through sfSystemThemeHead(), without a CSS build step. */
.sf-button {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: var(--sf-ui-control-height,44px); padding: .6rem 1rem;
    font-family: var(--sf-ui-font); font-size: var(--sf-ui-text-small,.9375rem) !important;
    font-weight: var(--sf-ui-weight-label,600) !important; line-height: 1.4;
    text-decoration: none; text-transform: none; letter-spacing: 0; white-space: nowrap;
    cursor: pointer; transform: none !important; transition: none;
}
/* Legacy skins may have ID selectors and !important declarations. Enforce the
   shared skin in private shells while preserving small/icon button geometry. */
html[data-theme] :is(body[data-private-shell],#sf-platform-admin) .sf-button,
.sf-button {
    color: var(--sf-button-color,var(--sf-ui-text)) !important;
    background: var(--sf-button-bg,var(--sf-ui-raised)) !important;
    border: 1px solid var(--sf-button-border,color-mix(in srgb,var(--sf-ui-text) 55%,var(--sf-ui-surface))) !important;
    border-radius: var(--sf-ui-radius,12px) !important; box-shadow: none !important;
}
html[data-theme] :is(body[data-private-shell],#sf-platform-admin) .sf-button:hover:not(:disabled):not([aria-disabled=true]),
.sf-button:hover:not(:disabled):not([aria-disabled=true]) {
    background: var(--sf-button-hover,var(--sf-ui-hover)) !important;
    border-color: var(--sf-button-border,var(--sf-ui-muted)) !important;
}
.sf-button--primary {
    --sf-button-bg: var(--sf-theme-action,var(--sf-ui-primary));
    --sf-button-hover: color-mix(in srgb,var(--sf-theme-action,var(--sf-ui-primary)) 85%,#000);
    --sf-button-border: var(--sf-theme-accent,var(--sf-ui-primary));
    --sf-button-color: var(--sf-ui-on-primary,#fff);
}
.sf-button--secondary {
    --sf-button-bg: var(--sf-component-action-surface,color-mix(in srgb,var(--sf-ui-primary) 8%,var(--sf-ui-surface)));
    --sf-button-hover: var(--sf-ui-hover);
    --sf-button-border: var(--sf-component-action-edge,color-mix(in srgb,var(--sf-ui-text) 55%,var(--sf-ui-surface)));
    --sf-button-color: var(--sf-ui-text);
}
.sf-button--danger { --sf-button-color: var(--sf-ui-danger); --sf-button-border: var(--sf-ui-danger); }
.sf-button--success { --sf-button-color: var(--sf-ui-positive); --sf-button-border: var(--sf-ui-positive); }
.sf-button--warning { --sf-button-color: var(--sf-ui-warning); --sf-button-border: var(--sf-ui-warning); }
.sf-button--ghost {
    --sf-button-bg: var(--sf-ui-surface);
    --sf-button-border: color-mix(in srgb,var(--sf-ui-text) 55%,var(--sf-ui-surface));
}
/* Shell adapters also cover legacy admin selectors. Variant colours have one
   owner, including a contrasting edge when a neutral dark fill is subtle. */
html[data-theme] :is(body[data-private-shell],#sf-platform-admin) [data-canvas] :is(.sf-button--secondary,.sf-button:not([class*="sf-button--"])) {
    --sf-button-bg: var(--sf-component-action-surface);
    --sf-button-border: var(--sf-component-action-edge);
    --sf-button-color: var(--sf-theme-text);
    --sf-button-hover: var(--sf-theme-hover);
}
html[data-theme] :is(body[data-private-shell],#sf-platform-admin) [data-canvas] .sf-button--primary {
    --sf-button-bg: var(--sf-theme-action); --sf-button-border: var(--sf-theme-accent);
    --sf-button-color: var(--sf-ui-on-primary);
    --sf-button-hover: var(--sf-private-action-hover);
}
.sf-button--small { min-height: var(--sf-ui-control-small,36px); padding: .4rem .65rem; font-size: .8125rem !important; }
.sf-button--large { min-height: 3.25rem; padding: .8rem 1.5rem; font-size: 1rem !important; }
.sf-button--icon { width: 2.25rem; min-width: 2.25rem; min-height: 2.25rem; padding: 0; }
.sf-button>svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sf-button--large>svg { width: 1.125rem; height: 1.125rem; }
.sf-button svg { color: inherit !important; }
.sf-button--icon>span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.sf-button:disabled,.sf-button[aria-disabled=true] { opacity: .6; cursor: not-allowed; }
.sf-button:focus-visible { outline: 2px solid var(--sf-ui-focus) !important; outline-offset: 3px; }
.sf-button[hidden] { display: none !important; }
/* Legacy slideshow controls keep their compact geometry and icon states,
   with the same requirement for an edge before hover. */
html[data-theme] body :is(.sf-login-carousel-trigger,.sf-login-motion-toggle) {
    border: 1px solid color-mix(in srgb,currentColor 70%,transparent) !important;
}