/**
 * Replyfect Interactions — canonical focus, hover, open states (Admin + Dashboard)
 *
 * Scope: .rf-app-shell (dashboard/admin) and .rf-auth (sign-in / recovery)
 * Tokens: design-tokens.css (--rf-focus-ring, --rf-input-focus-*, --rf-control-open-*, --rf-btn-overlay-*)
 * Load: design-tokens.css → typography.css → interactions.css → rf-feedback.css → app-shell.css → …
 *
 * Accent is for intent (primary buttons, open selects, selected rows) — not plain text field focus.
 * Page CSS must not add :focus accent rings; see docs/interactions.md.
 */

/* ——— Form controls ——— */
.rf-app-shell :is(
    .soft-input,
    .rf-input,
    textarea.soft-input,
    .rf-native-select,
    .rf-table-select,
    .rf-select-trigger
):not([type="color"]):not([type="file"]) {
    transition:
        background-color var(--rf-duration-base) var(--rf-ease-out),
        border-color var(--rf-duration-base) var(--rf-ease-out),
        box-shadow var(--rf-duration-base) var(--rf-ease-out);
}

.rf-app-shell :is(
    .soft-input,
    .rf-input,
    textarea.soft-input,
    .rf-native-select,
    .rf-table-select,
    .rf-select-trigger
):not([type="color"]):not([type="file"]):hover:not(:disabled):not(.rf-input-disabled) {
    border-color: color-mix(in srgb, var(--rf-border-strong) 55%, var(--rf-text-muted));
}

.rf-app-shell :is(
    .soft-input,
    .rf-input,
    textarea.soft-input,
    .rf-native-select,
    .rf-table-select,
    .rf-select-trigger
):not([type="color"]):not([type="file"]):focus,
.rf-app-shell :is(
    .soft-input,
    .rf-input,
    textarea.soft-input,
    .rf-native-select,
    .rf-table-select,
    .rf-select-trigger
):not([type="color"]):not([type="file"]):focus-visible {
    outline: none;
    border-color: var(--rf-input-focus-border) !important;
    box-shadow: var(--rf-input-focus-shadow) !important;
    background: var(--rf-bg-elevated) !important;
}

.rf-app-shell .soft-input:disabled,
.rf-app-shell .soft-input.rf-input-disabled,
.rf-app-shell .rf-input-disabled,
.rf-app-shell :is(
    .soft-input,
    .rf-input,
    textarea.soft-input,
    .rf-native-select,
    .rf-table-select,
    .rf-select-trigger
):disabled {
    color: var(--rf-text-muted);
    background: var(--rf-bg-muted) !important;
    cursor: not-allowed;
}

.rf-app-shell :is(
    .soft-input,
    .rf-input,
    textarea.soft-input,
    .rf-native-select,
    .rf-table-select,
    .rf-select-trigger
):disabled:hover,
.rf-app-shell :is(
    .soft-input,
    .rf-input,
    textarea.soft-input,
    .rf-native-select,
    .rf-table-select,
    .rf-select-trigger
):disabled:focus,
.rf-app-shell :is(
    .soft-input,
    .rf-input,
    textarea.soft-input,
    .rf-native-select,
    .rf-table-select,
    .rf-select-trigger
):disabled:focus-visible {
    border-color: var(--rf-border-strong);
    box-shadow: none;
}

/* ——— Validation errors ——— */
.rf-app-shell :is(.soft-input, .rf-input, textarea.soft-input).rf-field--error,
.rf-app-shell :is(.soft-input, .rf-input, textarea.soft-input).rf-field--error:focus,
.rf-app-shell :is(.soft-input, .rf-input, textarea.soft-input).rf-field--error:focus-visible {
    border-color: var(--rf-danger-border) !important;
    background-color: var(--rf-danger-bg) !important;
    box-shadow: var(--rf-focus-ring-danger) !important;
}

/* ——— Buttons & controls (keyboard focus ring only) ——— */
.rf-app-shell :is(
    .rf-btn-primary,
    .rf-btn-secondary,
    .rf-btn-danger,
    .rf-btn-alert,
    .rf-btn-ghost,
    .rf-btn-icon-ghost,
    .rf-btn-danger-text,
    .rf-code-copy-btn,
    .rf-select-option,
    .rf-widget-subnav-btn,
    .rf-table-checkbox,
    .rf-choice-input,
    .rf-drawer__close,
    .rf-drawer-expand-btn,
    .rf-drawer-icon-btn,
    .rf-lib-icon-btn
):focus:not(:focus-visible) {
    outline: none;
}

.rf-app-shell :is(
    .rf-btn-primary,
    .rf-btn-secondary,
    .rf-btn-danger,
    .rf-btn-alert,
    .rf-btn-ghost,
    .rf-btn-icon-ghost,
    .rf-btn-danger-text,
    .rf-code-copy-btn,
    .rf-select-option,
    .rf-widget-subnav-btn,
    .rf-table-checkbox,
    .rf-choice-input,
    .rf-drawer__close,
    .rf-drawer-expand-btn,
    .rf-drawer-icon-btn,
    .rf-lib-icon-btn
):focus-visible {
    outline: none;
    box-shadow: var(--rf-focus-ring);
}

/* ——— Buttons: hover & active ——— */
.rf-app-shell .rf-btn-primary {
    position: relative;
    isolation: isolate;
}

.rf-app-shell .rf-btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: transparent;
    pointer-events: none;
    transition: background var(--rf-duration-base) var(--rf-ease-out);
}

.rf-app-shell .rf-btn-primary > * {
    position: relative;
    z-index: 1;
}

.rf-app-shell .rf-btn-primary:hover:not(:disabled):not([aria-disabled="true"])::after {
    background: var(--rf-btn-overlay-hover);
}

.rf-app-shell .rf-btn-primary:active:not(:disabled):not([aria-disabled="true"])::after {
    background: var(--rf-btn-overlay-active);
}

.rf-app-shell .rf-btn-secondary {
    transition:
        background var(--rf-duration-base) var(--rf-ease-out),
        border-color var(--rf-duration-base) var(--rf-ease-out);
}

.rf-app-shell .rf-btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--rf-bg-muted);
    border-color: var(--rf-text-muted);
}

/* Table pagination — hide nav controls when not applicable (shared Admin + Dashboard) */
.rf-app-shell .rf-table-pagination [data-rf-page-prev][hidden],
.rf-app-shell .rf-table-pagination [data-rf-page-next][hidden],
.rf-app-shell .rf-table-pagination [data-rf-page-current][hidden] {
    display: none !important;
}

.rf-app-shell .rf-select-menu--menu-fit {
    padding: 0.125rem;
}

.rf-app-shell .rf-select-menu--menu-fit .rf-select-option {
    font-size: var(--rf-text-sm);
    padding: 0.3125rem 0.5rem;
    line-height: 1.35;
}

.rf-app-shell .rf-btn-danger {
    transition: background var(--rf-duration-base) var(--rf-ease-out);
}

.rf-app-shell .rf-btn-danger:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--rf-btn-danger-hover);
}

.rf-app-shell .rf-btn-alert {
    transition: background var(--rf-duration-base) var(--rf-ease-out);
}

.rf-app-shell .rf-btn-alert:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--rf-btn-alert-hover);
}

.rf-app-shell .rf-btn-ghost {
    transition: background var(--rf-duration-base) var(--rf-ease-out);
}

.rf-app-shell .rf-btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
    background: color-mix(in srgb, var(--rf-accent) 20%, transparent);
}

.rf-app-shell .rf-btn-icon-ghost {
    transition:
        color var(--rf-duration-base) var(--rf-ease-out),
        background var(--rf-duration-base) var(--rf-ease-out);
}

.rf-app-shell .rf-btn-icon-ghost:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--rf-text-primary);
    background: color-mix(in srgb, var(--rf-text-primary) 4%, transparent);
}

.rf-app-shell .rf-btn-danger-text {
    transition: background var(--rf-duration-base) var(--rf-ease-out);
}

.rf-app-shell .rf-btn-danger-text:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--rf-danger-bg) !important;
}

.rf-app-shell .rf-code-copy-btn {
    transition:
        opacity var(--rf-duration-base) var(--rf-ease-out),
        background var(--rf-duration-base) var(--rf-ease-out),
        color var(--rf-duration-base) var(--rf-ease-out);
}

.rf-app-shell .rf-code-copy-btn:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--rf-text-primary);
    background: var(--rf-bg-muted);
}

.rf-app-shell .rf-widget-subnav-btn {
    transition:
        background var(--rf-duration-base) var(--rf-ease-out),
        color var(--rf-duration-base) var(--rf-ease-out);
}

.rf-app-shell .rf-widget-subnav-btn:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--rf-bg-muted);
    color: var(--rf-text-primary);
}

.rf-app-shell .rf-lib-icon-btn {
    transition:
        background-color var(--rf-duration-base) var(--rf-ease-out),
        border-color var(--rf-duration-base) var(--rf-ease-out),
        color var(--rf-duration-base) var(--rf-ease-out);
}

.rf-app-shell .rf-lib-icon-btn:hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--rf-bg-muted);
    border-color: color-mix(in srgb, var(--rf-border) 70%, var(--rf-text-muted));
    color: var(--rf-text-primary);
}

.rf-app-shell .rf-drawer__close {
    transition:
        background var(--rf-duration-base) var(--rf-ease-out),
        color var(--rf-duration-base) var(--rf-ease-out),
        border-color var(--rf-duration-base) var(--rf-ease-out);
}

.rf-app-shell .rf-drawer__close:hover:not(:disabled):not([aria-disabled="true"]) {
    color: var(--rf-text-primary);
    background: var(--rf-bg-elevated);
    border-color: var(--rf-border);
}

.rf-app-shell .rf-drawer-expand-btn,
.rf-app-shell .rf-drawer-icon-btn {
    transition:
        background var(--rf-duration-base) var(--rf-ease-out),
        border-color var(--rf-duration-base) var(--rf-ease-out),
        color var(--rf-duration-base) var(--rf-ease-out);
}

.rf-app-shell .rf-drawer-expand-btn:hover:not(:disabled):not([aria-disabled="true"]),
.rf-app-shell .rf-drawer-icon-btn:hover:not(:disabled):not(.is-disabled):not([aria-disabled="true"]) {
    color: var(--rf-accent);
    background: color-mix(in srgb, var(--rf-accent) 22%, var(--rf-bg-elevated));
    border-color: color-mix(in srgb, var(--rf-accent) 35%, var(--rf-border));
}

/* ——— Documented exceptions (accent / inset — not plain field focus) ——— */
.rf-app-shell .rf-credits-toggle:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 1px var(--rf-text-muted);
}

.rf-app-shell .rf-upgrade-inline:focus-visible {
    outline: none;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--rf-accent);
}

html.dark .rf-app-shell.rf-dashboard #saveProfileBtn::after {
    display: none;
}

/* ——— Select / popover open (not keyboard focus) ——— */
.rf-app-shell .rf-select-trigger[aria-expanded="true"] {
    border-color: var(--rf-control-open-border);
    box-shadow: var(--rf-control-open-shadow);
}

/* ——— Focusable table rows ——— */
.rf-app-shell tbody tr.rf-table-row--selectable:focus:not(:focus-visible) {
    outline: none;
}

.rf-app-shell tbody tr.rf-table-row--selectable:focus-visible {
    outline: 1px solid var(--rf-border-strong);
    outline-offset: -1px;
}

/* ——— Dest path copy (text button in table) ——— */
.rf-app-shell .rf-dest-path-copy:focus:not(:focus-visible) {
    outline: none;
}

.rf-app-shell .rf-dest-path-copy:focus-visible {
    outline: none;
    color: var(--rf-text-primary);
    box-shadow: var(--rf-input-focus-shadow);
    border-radius: var(--rf-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    .rf-app-shell :is(
        .soft-input,
        .rf-input,
        textarea.soft-input,
        .rf-native-select,
        .rf-table-select,
        .rf-select-trigger,
        .rf-btn-primary,
        .rf-btn-secondary,
        .rf-btn-danger,
        .rf-btn-alert,
        .rf-btn-ghost,
        .rf-btn-icon-ghost,
        .rf-btn-danger-text,
        .rf-code-copy-btn,
        .rf-select-option,
        .rf-widget-subnav-btn,
        .rf-drawer__close,
        .rf-drawer-expand-btn,
        .rf-drawer-icon-btn,
        .rf-lib-icon-btn
    ) {
        transition: none;
    }

    .rf-app-shell .rf-btn-primary::after {
        transition: none;
    }

    .rf-auth :is(
        .soft-input,
        .rf-input,
        textarea.soft-input,
        .rf-btn-primary
    ) {
        transition: none;
    }

    .rf-auth .rf-btn-primary::after {
        transition: none;
    }
}

/* ——— Auth pages (index.html, auth.html) ——— */
.rf-auth :is(
    .soft-input,
    .rf-input,
    textarea.soft-input
):not([type="color"]):not([type="file"]) {
    transition:
        background-color var(--rf-duration-base) var(--rf-ease-out),
        border-color var(--rf-duration-base) var(--rf-ease-out),
        box-shadow var(--rf-duration-base) var(--rf-ease-out);
}

.rf-auth :is(
    .soft-input,
    .rf-input,
    textarea.soft-input
):not([type="color"]):not([type="file"]):hover:not(:disabled):not(.rf-input-disabled) {
    border-color: color-mix(in srgb, var(--rf-border-strong) 55%, var(--rf-text-muted));
}

.rf-auth :is(
    .soft-input,
    .rf-input,
    textarea.soft-input
):not([type="color"]):not([type="file"]):focus,
.rf-auth :is(
    .soft-input,
    .rf-input,
    textarea.soft-input
):not([type="color"]):not([type="file"]):focus-visible {
    outline: none;
    border-color: var(--rf-input-focus-border) !important;
    box-shadow: var(--rf-input-focus-shadow) !important;
    background: var(--rf-bg-elevated) !important;
}

.rf-auth :is(.soft-input, .rf-input, textarea.soft-input).rf-field--error,
.rf-auth :is(.soft-input, .rf-input, textarea.soft-input).rf-field--error:focus,
.rf-auth :is(.soft-input, .rf-input, textarea.soft-input).rf-field--error:focus-visible {
    border-color: var(--rf-danger-border) !important;
    background-color: var(--rf-danger-bg) !important;
    box-shadow: var(--rf-focus-ring-danger) !important;
}

.rf-auth .rf-btn-primary:focus:not(:focus-visible) {
    outline: none;
}

.rf-auth .rf-btn-primary:focus-visible {
    outline: none;
    box-shadow: var(--rf-focus-ring);
}

.rf-auth .rf-btn-primary {
    position: relative;
    isolation: isolate;
}

.rf-auth .rf-btn-primary::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: transparent;
    pointer-events: none;
    transition: background var(--rf-duration-base) var(--rf-ease-out);
}

.rf-auth .rf-btn-primary:hover:not(:disabled):not([aria-disabled="true"])::after {
    background: var(--rf-btn-overlay-hover);
}

.rf-auth .rf-btn-primary:active:not(:disabled):not([aria-disabled="true"])::after {
    background: var(--rf-btn-overlay-active);
}

.rf-auth .rf-auth-link:focus-visible {
    outline: none;
    box-shadow: var(--rf-focus-ring);
    border-radius: var(--rf-radius-sm);
}