/* =========================
   FLUENT PAGINATION (IMPROVED)
========================= */

.fluent-pagination {
    display: inline-flex;
    align-items: center;
    gap: 2px;

    padding: 2px;
    border-radius: var(--ms-radius-md);
}

/* ITEM BASE */
.fluent-page {
    min-width: 32px;
    height: 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0 10px;

    border-radius: var(--ms-radius-sm);

    background: transparent;
    color: var(--ms-color-text-primary);

    text-decoration: none;
    cursor: pointer;

    transition:
        background-color var(--ms-motion-fast) var(--ms-ease),
        transform var(--ms-motion-fast) var(--ms-ease);
}

/* HOVER (FLUENT STYLE) */
.fluent-page:hover {
    background: var(--ms-color-neutral-100);
}

/* ACTIVE (OUTLOOK STYLE) */
.fluent-page.active {
    background: var(--ms-color-neutral-200);
    color: var(--ms-color-text-primary);
    font-weight: 600;
}

/* FOCUS (ACCESSIBILITY FLUENT) */
.fluent-page:focus-visible {
    outline: 2px solid var(--ms-color-border-focus);
    outline-offset: 2px;
}

/* DISABLED */
.fluent-page.disabled {
    opacity: var(--ms-opacity-disabled);
    cursor: not-allowed;
}

/* DOTS */
.fluent-page.dots {
    cursor: default;
    background: transparent;
    color: var(--ms-color-text-secondary);
}